coppied changes from german version

app.py

@@ -20,7 +20,7 @@ def get_embeddings(queries, task):
 def query_chroma(collection, embedding, authors):
     results = collection.query(
         query_embeddings=[embedding.tolist()],
-        n_results=10,
+        n_results=20,
         where={"author": {"$in": authors}} if authors else {},
         include=["documents", "metadatas", "distances"]
     )
@@ -34,10 +34,10 @@ def query_chroma(collection, embedding, authors):
     for id_, metadata, document_text, distance in zip(ids, metadatas, documents, distances):
         result_dict = {
             "id": id_,
-            "author": metadata.get('author', 'Unknown author'),
-            "book": metadata.get('book', 'Unknown book'),
-            "section": metadata.get('section', 'Unknown section'),
-            "title": metadata.get('title', 'Untitled'),
+            "author": metadata.get('author', ''),
+            "book": metadata.get('book', ''),
+            "section": metadata.get('section', ''),
+            "title": metadata.get('title', ''),
             "text": document_text,
             "distance": distance
         }
@@ -45,12 +45,88 @@ def query_chroma(collection, embedding, authors):
 
     return formatted_results
 
-with gr.Blocks(css=".custom-markdown { border: 1px solid #ccc; padding: 10px; border-radius: 5px; }")  as demo:
-    gr.Markdown("Enter your query, filter authors (default is all), click **Search** to search. Delimit multiple queries with semicola; since there is a quota for each user (based on IP) it makes sense to query in batches. The search takes around 40 seconds, regardless of the number of queries, because the embedding model needs to be loaded to a GPU each time.")
+theme = gr.themes.Soft(
+    primary_hue="indigo",
+    secondary_hue="slate",
+    neutral_hue="slate",
+    spacing_size="lg",
+    radius_size="lg",
+    text_size="lg",
+    font=["Helvetica", "sans-serif"],
+    font_mono=["Courier", "monospace"],
+).set(
+    body_text_color="*neutral_800",
+    block_background_fill="*neutral_50",
+    block_border_width="0px",
+    button_primary_background_fill="*primary_600",
+    button_primary_background_fill_hover="*primary_700",
+    button_primary_text_color="white",
+    input_background_fill="white",
+    input_border_color="*neutral_200",
+    input_border_width="1px",
+    checkbox_background_color_selected="*primary_600",
+    checkbox_border_color_selected="*primary_600",
+)
+
+custom_css = """
+/* Remove outer padding, margins, and borders */
+gradio-app,
+gradio-app > div,
+gradio-app .gradio-container {
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+}
+
+/* Remove any potential outlines */
+gradio-app:focus,
+gradio-app > div:focus,
+gradio-app .gradio-container:focus {
+    outline: none !important;
+}
+
+/* Ensure full width */
+gradio-app {
+    width: 100% !important;
+    display: block !important;
+}
+
+.custom-markdown { 
+    border: 1px solid var(--neutral-200); 
+    padding: 10px; 
+    border-radius: var(--radius-lg);
+    background-color: var(--color-background-primary);
+    margin-bottom: 15px;
+}
+.custom-markdown p {
+    margin-bottom: 10px;
+    line-height: 1.6;
+}
+
+@media (max-width: 768px) {
+    gradio-app, 
+    gradio-app > div,
+    gradio-app .gradio-container {
+        padding-left: 1px !important;
+        padding-right: 1px !important;
+    }
+    .custom-markdown {
+        padding: 5px;
+    }
+    .accordion {
+        margin-left: -10px;
+        margin-right: -10px;
+    }
+}
+"""
+
+with gr.Blocks(theme=theme, css=custom_css)  as demo:
+    gr.Markdown("Enter one or more queries, divide them with semicola; filter authors (default is all), click **Search** to search.")
     #database_inp = gr.Dropdown(label="Database", choices=["German", "English"], value="German")
     author_inp = gr.Dropdown(label="Authors", choices=authors_list_en, multiselect=True)
-    inp = gr.Textbox(label="Query", placeholder="How can I live a healthy life?; How can I improve my ability to focus?; What is the meaning of life?; ...")
+    inp = gr.Textbox(label="Query", lines=3, placeholder="How can I live a healthy life?; How can I improve my ability to focus?; What is the meaning of life?; ...")
     btn = gr.Button("Search")
+    loading_indicator = gr.Markdown(visible=False, elem_id="loading-indicator")
     results = gr.State()
 
     #def update_authors(database):
@@ -72,24 +148,43 @@ with gr.Blocks(css=".custom-markdown { border: 1px solid #ccc; padding: 10px; bo
         for query, embedding in zip(queries, embeddings):
             res = query_chroma(collection, embedding, authors)
             results_data.append((query, res))
-        return results_data
+        return results_data, ""
 
     btn.click(
+        fn=lambda: ("", gr.update(visible=True)),
+        inputs=None,
+        outputs=[loading_indicator, loading_indicator],
+        queue=False
+    ).then(
         perform_query,
         inputs=[inp, author_inp],
-        outputs=[results]
+        outputs=[results, loading_indicator]
     )
 
     @gr.render(inputs=[results])
     def display_accordion(data):
         for query, res in data:
-            with gr.Accordion(query, open=False) as acc:
+            with gr.Accordion(query, open=False, elem_classes="accordion") as acc:
                 for result in res:
                     with gr.Column():
-                        author = result.get('author', 'Unknown author')
-                        book = result.get('book', 'Unknown book')
-                        text = result.get('text')
-                        markdown_contents = f"**{author}, {book}**\n\n{text}"
+                        author = str(result.get('author', ''))
+                        book = str(result.get('book', ''))
+                        section = str(result.get('section', ''))
+                        title = str(result.get('title', ''))
+                        text = str(result.get('text', ''))
+
+                        header_parts = []
+                        if author and author != "Unknown":
+                            header_parts.append(author)
+                        if book and book != "Unknown":
+                            header_parts.append(book)
+                        if section and section != "Unknown":
+                            header_parts.append(section)
+                        if title and title != "Unknown":
+                            header_parts.append(title)
+                        
+                        header = ", ".join(header_parts)
+                        markdown_contents = f"**{header}**\n\n{text}"
                         gr.Markdown(value=markdown_contents, elem_classes="custom-markdown")
 
-demo.launch()
+demo.launch(inline=False)