Update app.py

app.py

@@ -1,112 +1,34 @@
 import gradio as gr
 
-# Fungsi untuk konten masing-masing halaman (tab)
-def page_one_content():
-    return "Ini adalah halaman pertama. Di sini Anda bisa melihat informasi pertama."
+# Fungsi untuk tab "Home"
+def home_content():
+    return "Selamat datang di halaman Home!"
 
-def page_two_content():
-    return "Ini adalah halaman kedua. Di sini Anda bisa melihat informasi kedua."
+# Fungsi untuk tab "Coba sekarang"
+def coba_sekarang_content():
+    return "Ini adalah halaman 'Coba sekarang'!"
 
-# Custom CSS untuk mengubah background color dan gambar masing-masing tab
-custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;700&display=swap');
-
-body {
-    background: linear-gradient(to bottom, #FFA500, #1E90FF); /* Gradient background */
-    color: #ffffff !important; /* White text */
-    margin: 0;
-    padding: 0;
-    overflow: hidden; /* Prevent extra scrollbars outside the container */
-}
-
-.gradio-container {
-    max-height: 90vh; /* Batas tinggi untuk membuat scrollbar */
-    overflow-y: auto; /* Scrollable secara vertikal */
-    background: transparent !important;
-    color: #ffffff !important;
-    border-radius: 12px;
-    padding: 20px;
-    text-align: center;
-    box-sizing: border-box;
-}
-
-.gradio-container .wrap h1 {
-    font-size: 100px !important; /* Adjust font size for the title */
-    font-family: 'Itim', cursive !important; /* Set title font to Itim */
-    font-weight: bold !important; /* Make the title bold */
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add a shadow effect */
-    color: #000000 !important; /* Title color */
-}
-
-.gradio-container .wrap .description {
-    font-size: 60px !important; /* Adjust font size for the description */
-    font-family: 'Instrument Sans', sans-serif !important; /* Set description font to Instrument Sans */
-    font-weight: 400; /* Use normal font weight */
-    line-height: 1.5; /* Optional: Add line spacing */
-    color: #000000; 
-}
-
-.output-textbox textarea {
-    background-color: #1e1e1e !important; /* Dark gray background for textbox */
-    color: #ffffff !important; /* White text */
-    border: 2px solid #000000; 
-    font-weight: bold;
-    font-size: 16px;
-    padding: 10px;
-    border-radius: 8px;
-}
-
-/* CSS untuk tab "Home" dengan background biru */
-.gradio-tab-item:nth-child(1) {
-    background-image: url('https://example.com/home-background.jpg') !important;
-    background-size: cover !important;
-    color: white !important;
-}
-
-/* CSS untuk tab "Coba Sekarang" dengan background oranye */
-.gradio-tab-item:nth-child(2) {
-    background-image: url('https://example.com/coba-sekarang-background.jpg') !important;
-    background-size: cover !important;
-    color: white !important;
-}
-
-.gradio-container::-webkit-scrollbar {
-    width: 12px; /* Lebar scrollbar */
-}
-
-.gradio-container::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.2); /* Warna latar belakang track */
-    border-radius: 6px; /* Membuat sudut melengkung */
-}
-
-.gradio-container::-webkit-scrollbar-thumb {
-    background: rgba(255, 165, 0, 0.8); /* Warna scrollbar (oranye transparan) */
-    border-radius: 6px; /* Membuat sudut melengkung */
-    border: 2px solid rgba(30, 144, 255, 0.5); /* Border dengan warna biru */
-}
-
-.gradio-container::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 165, 0, 1); /* Warna scrollbar saat hover */
-    border: 2px solid rgba(30, 144, 255, 1); /* Border lebih tegas saat hover */
-}
-"""
-
-# Membuat antarmuka menggunakan Tabs
+# Membuat antarmuka dengan tab
 with gr.Blocks() as demo:
     with gr.Tab("Home"):
-        gr.Textbox(value=page_one_content())
-    with gr.Tab("Coba Sekarang"):
-        gr.Textbox(value=page_two_content())
-
-    title="🌟 AiCNE 🌟",
-    description=(
-        "<div style='text-align: center;'>"
-        "Welcome to <b>AiCNE</b>, your AI-powered assistant for acne detection!<br>"
-        "Upload a clear image of your face to analyze and classify acne types.<br>"
-        "<b>Get instant results</b> and take a step closer to understanding your skin!"
-        "</div>"
-    ),
-    css=custom_css
-
+        with gr.Column():
+            gr.Markdown("### Home Page")
+            gr.Textbox(home_content, label="Home", elem_id="home_box")
+
+    with gr.Tab("Coba sekarang"):
+        with gr.Column():
+            gr.Markdown("### Coba sekarang")
+            gr.Textbox(coba_sekarang_content, label="Coba sekarang", elem_id="coba_sekarang_box")
+
+    # Menggunakan CSS untuk mengganti warna latar belakang tiap tab
+    demo.css = """
+    #home_box {
+        background-color: lightblue;
+    }
+    #coba_sekarang_box {
+        background-color: lightgreen;
+    }
+    """
+
+# Menjalankan aplikasi Gradio
 demo.launch()