Update app.py

app.py

@@ -40,11 +40,24 @@ STYLE = """
   border-right: none !important;
   box-shadow: none !important;
 }
+
+.no-gap {
+    gap: 0px;
+}
+
+.no-radius {
+    border-radius: 0px;    
+}
+
+#search_input > label > span {
+    display: none;
+}
 """
 
 dataset_repo_id = "chansung/auto-paper-qa2"
 ds = datasets.load_dataset(dataset_repo_id)
 
+title2qna = {}
 date2qna = {}
 longest_qans = 0
 
@@ -72,6 +85,13 @@ for data in ds["train"]:
     else:
         date2qna[date] = [data]
 
+for date in date2qna:
+    papers = date2qna[date]
+    for paper in papers:
+        title2qna[paper["title"]] = paper
+
+titles = title2qna.keys()
+
 sorted_dates = sorted(date2qna.keys())
 last_date = sorted_dates[-1]
 last_papers = date2qna[last_date]
@@ -125,18 +145,149 @@ def set_paper(date, paper_title):
         gr.Markdown(f"↪ **(Technical)** {selected_paper['2_additional_breath_q:answers:expert']}"),
     )
 
+def dumb(title):
+    if len(title) > 10:
+        return f"{title[:10]}..."
+    return title
+
+def search(search_in, max_results=3):
+    results = []
+
+    for title in titles:
+        if len(results) > 3:
+            break
+        else:
+            if search_in in title:
+                results.append(title)
+
+    return (
+        gr.Textbox(
+            visible=True if len(results) > 0 else False,
+            value=results[0] if len(results) > 0 else ""
+        ),
+        gr.Textbox(
+            visible=True if len(results) > 1 else False,
+            value=results[1] if len(results) > 1 else ""
+        ),
+        gr.Textbox(
+            visible=True if len(results) > 2 else False,
+            value=results[2] if len(results) > 2 else ""
+        )
+    )
+
+UPDATE_SEARCH_RESULTS = f"""
+function search(searchIn, maxResults = 3) {{
+    if (searchIn.trim().length > 0) {{
+        const results = [];
+        let titles = {list(titles)};
+
+        for (const title of titles) {{ // Assuming 'titles' is an array defined elsewhere
+            if (results.length > 3) {{
+                break;
+            }} else {{
+                if (title.toLowerCase().includes(searchIn.toLowerCase())) {{ // JavaScript's equivalent to Python's 'in'
+                    results.push(title);
+                }}
+            }}
+        }}
+
+        // Handle UI elements (Explanation below)
+        const resultElements = [1, 2, 3].map(index => {{
+            return results[index - 1] || '';
+        }});
+
+        if (resultElements[0] == '') {{
+            document.getElementById('search_r1').style.display = 'none';
+        }} else {{
+            document.getElementById('search_r1').style.display = 'block';
+        }}
+
+        if (resultElements[1] == '') {{
+            document.getElementById('search_r2').style.display = 'none';
+        }} else {{
+            document.getElementById('search_r2').style.display = 'block';
+        }}
+
+        if (resultElements[2] == '') {{
+            document.getElementById('search_r3').style.display = 'none';
+        }} else {{
+            document.getElementById('search_r3').style.display = 'block';
+        }}
+
+        return resultElements; 
+    }} else {{
+        document.getElementById('search_r1').style.display = 'none';
+        document.getElementById('search_r2').style.display = 'none';
+        document.getElementById('search_r3').style.display = 'none';
+
+        return ['', '', '']
+    }}
+}}
+"""
+
+def set_date(title):
+    paper = title2qna[title]
+    date = paper["target_date"].strftime("%Y-%m-%d")
+    return date
+
+def set_papers(date, title):
+    papers = [paper["title"] for paper in date2qna[date]]
+    return (
+        gr.Dropdown(choices=papers, value=title),
+        gr.Textbox("")
+    )
+
 with gr.Blocks(css=STYLE) as demo:
-    date_dd = gr.Dropdown(
-        sorted_dates, 
-        value=last_date, 
-        label="Select date", 
-        interactive=True
+    with gr.Row():
+        date_dd = gr.Dropdown(
+            sorted_dates, 
+            value=last_date, 
+            label="Select date", 
+            interactive=True,
+            scale=3,
+        )
+        papers_dd = gr.Dropdown(
+            [paper["title"] for paper in last_papers],
+            value=selected_paper["title"],
+            label="Select paper title", 
+            interactive=True,
+            scale=7,
+        )
+
+    with gr.Column(elem_classes=["no-gap"]):
+        search_in = gr.Textbox("", placeholder="Enter keywords to search...", elem_id="search_input")
+        search_r1 = gr.Button(visible=False, elem_id="search_r1", elem_classes=["no-radius"])
+        search_r2 = gr.Button(visible=False, elem_id="search_r2", elem_classes=["no-radius"])
+        search_r3 = gr.Button(visible=False, elem_id="search_r3", elem_classes=["no-radius"])
+
+    search_r1.click(
+        set_date,
+        search_r1,
+        date_dd
+    ).then(
+        set_papers,
+        inputs=[date_dd, search_r1],
+        outputs=[papers_dd, search_in]
     )
-    papers_dd = gr.Dropdown(
-        [paper["title"] for paper in last_papers],
-        value=selected_paper["title"],
-        label="Select paper title", 
-        interactive=True
+
+    search_r2.click(
+        set_date,
+        search_r2,
+        date_dd
+    ).then(
+        set_papers,
+        inputs=[date_dd, search_r2],
+        outputs=[papers_dd, search_in]
+    )
+
+    search_r3.click(
+        set_date,
+        search_r3,
+        date_dd
+    ).then(
+        set_papers,
+        inputs=[date_dd, search_r3],
+        outputs=[papers_dd, search_in]
     )
 
     title = gr.Markdown(f"# {selected_paper['title']}")
@@ -215,7 +366,7 @@ with gr.Blocks(css=STYLE) as demo:
         ]        
     )
 
-    papers_dd.input(
+    papers_dd.change(
         set_paper,
         [date_dd, papers_dd],
         [
@@ -234,4 +385,11 @@ with gr.Blocks(css=STYLE) as demo:
         ]
     )
 
+    search_in.change(
+        inputs=[search_in],
+        outputs=[search_r1, search_r2, search_r3],
+        js=UPDATE_SEARCH_RESULTS,
+        fn=None
+    )
+
 demo.launch(share=True)