fix button order elem

app.py

@@ -6,8 +6,6 @@ from dotenv import load_dotenv
 
 load_dotenv()
 
-# Load the model globally to ensure it's only loaded once
-# This is crucial for performance and resource management
 model = SentenceTransformer("sentence-transformers/paraphrase-multilingual-MiniLM-L12-v2")
 
 # === Supabase ===
@@ -19,11 +17,9 @@ def get_embedding(text: str):
     """
     Menghasilkan embedding vector dari teks menggunakan model SentenceTransformer.
     """
-    # Menghindari encoding teks kosong
     if not text:
         return []
     
-    # Mengonversi array numpy ke list Python agar bisa di-JSON-kan
     embedding = model.encode(text).tolist()
     return embedding
 
@@ -95,11 +91,6 @@ def search_kbli(text: str):
     html += "</div>"
     return html
 
-# Gradio Interface
-# `fn` adalah fungsi yang akan dieksekusi
-# `inputs` adalah jenis input (dalam hal ini, sebuah teks)
-# `outputs` adalah jenis output (dalam hal ini, sebuah JSON)
-# `api_name` adalah nama endpoint API
 with gr.Blocks(css="""
     .title {font-size: 22px; font-weight: 700; color: #111827; margin-bottom: 4px;}
     .desc {font-size: 14px; color: #6b7280; margin-bottom: 16px;}
@@ -107,33 +98,49 @@ with gr.Blocks(css="""
     .btn-primary:hover {background-color: #11a12f;}
     .btn-clear {background-color: #f3f4f6; color: #374151; border-radius: 6px;}
     .btn-clear:hover {background-color: #e5e7eb;}
+    
+    .btn-row {display: flex; gap: 8px;}
+    .btn-row > * {flex: 1;}
+
+    @media (max-width: 640px) {
+        .btn-row {flex-direction: column-reverse;}
+        .btn-row > button {
+            width: 100% !important;
+            flex: none;
+        }
+    }
 """) as demo:
     gr.Markdown("<div class='title'>Semantic KBLI Search</div>")
     gr.Markdown("<div class='desc'>Cari kode KBLI dengan semantic search (Embedding + Matching)</div>")
 
     with gr.Tab("Embedding Only"):
-        inp1 = gr.Textbox(label="Masukkan teks")
-        out1 = gr.JSON(label="Embedding Vector")
-        inp1.submit(get_embedding, inp1, out1, api_name="get_embedding")
-
         with gr.Row():
-            btn_submit1 = gr.Button("Submit", elem_classes="btn-primary")
-            btn_clear1 = gr.Button("Clear", elem_classes="btn-clear")
+            with gr.Column(scale=1):
+                inp1 = gr.Textbox(label="Masukkan teks")
 
-        btn_submit1.click(get_embedding, inp1, out1, api_name="get_embedding")
+                with gr.Row(elem_classes="btn-row"):
+                    btn_clear1 = gr.Button("Clear", elem_classes="btn-clear")
+                    btn_submit1 = gr.Button("Submit", elem_classes="btn-primary")
+
+            with gr.Column(scale=1):
+                out1 = gr.JSON(label="Embedding Vector")
+        
+        inp1.submit(get_embedding, inp1, out1, api_name="get_embedding")
         btn_clear1.click(lambda: ("", None), None, [inp1, out1])
+        btn_submit1.click(get_embedding, inp1, out1, api_name="get_embedding")
 
     with gr.Tab("Search KBLI"):
         inp2 = gr.Textbox(label="Masukkan teks")
-        out2 = gr.HTML(label="Hasil Pencarian KBLI")
-        inp2.submit(search_kbli, inp2, out2, api_name="search_kbli")
 
-        with gr.Row():
-            btn_submit2 = gr.Button("Submit", elem_classes="btn-primary")
+        with gr.Row(elem_classes="btn-row"):
             btn_clear2 = gr.Button("Clear", elem_classes="btn-clear")
-
-        btn_submit2.click(search_kbli, inp2, out2, api_name="search_kbli")
+            btn_submit2 = gr.Button("Submit", elem_classes="btn-primary")
+        
+        out2 = gr.HTML(label="Hasil Pencarian Semantic")
+        
+        inp2.submit(search_kbli, inp2, out2, api_name="search_kbli")
         btn_clear2.click(lambda: ("", None), None, [inp2, out2])
+        btn_submit2.click(search_kbli, inp2, out2, api_name="search_kbli")
 
 if __name__ == "__main__":
     demo.queue().launch()