Adding Examples

app.py

@@ -4,6 +4,7 @@ os.environ["TOKENIZERS_PARALLELISM"] = "false"
 
 from PIL import ImageDraw
 import streamlit as st
+from st_clickable_images import clickable_images
 
 st.set_page_config(layout="wide")
 
@@ -63,10 +64,15 @@ st.markdown("# DocQuery: Query Documents w/ NLP")
 if "document" not in st.session_state:
     st.session_state["document"] = None
 
-input_col, model_col = st.columns([2, 1])
+if "last_clicked" not in st.session_state:
+    st.session_state["last_clicked"] = None
+
+input_col, model_col = st.columns(2)
 
 with input_col:
-    input_type = st.radio("Pick an input type", ["Upload", "URL"], horizontal=True)
+    input_type = st.radio(
+        "Pick an input type", ["Upload", "URL", "Examples"], horizontal=True
+    )
 
 with model_col:
     model_type = st.radio("Pick a model", list(CHECKPOINTS.keys()), horizontal=True)
@@ -97,16 +103,62 @@ def load_url_cb():
         st.session_state.document = document
 
 
+examples = [
+    (
+        "https://templates.invoicehome.com/invoice-template-us-neat-750px.png",
+        "What is the invoice number?",
+    ),
+    (
+        "https://miro.medium.com/max/787/1*iECQRIiOGTmEFLdWkVIH2g.jpeg",
+        "What is the purchase amount?",
+    ),
+    (
+        "https://www.accountingcoach.com/wp-content/uploads/2013/10/income-statement-example@2x.png",
+        "What are net sales for 2020?",
+    ),
+]
+imgs_clicked = []
+
 if input_type == "Upload":
     file = st.file_uploader(
         "Upload a PDF or Image document", key="file_input", on_change=load_file_cb
     )
-
 elif input_type == "URL":
-    # url = st.text_input("URL", "", on_change=load_url_callback, key="url_input")
     url = st.text_input("URL", "", key="url_input", on_change=load_url_cb)
-
-question = st.text_input("QUESTION", "")
+elif input_type == "Examples":
+    example_cols = st.columns(len(examples))
+    for (i, (path, question)) in enumerate(examples):
+        with example_cols[i]:
+            imgs_clicked.append(
+                clickable_images(
+                    [path],
+                    div_style={
+                        "display": "flex",
+                        "justify-content": "center",
+                        "flex-wrap": "wrap",
+                        "cursor": "pointer",
+                    },
+                    img_style={"margin": "5px", "height": "200px"},
+                )
+            )
+            st.markdown(
+                f"<p style='text-align: center'>{question}</p>",
+                unsafe_allow_html=True,
+            )
+print(imgs_clicked)
+imgs_clicked = [-1] * len(imgs_clicked)
+
+#    clicked = clickable_images(
+#        [x[0] for x in examples],
+#        titles=[x[1] for x in examples],
+#        div_style={"display": "flex", "justify-content": "center", "flex-wrap": "wrap"},
+#        img_style={"margin": "5px", "height": "200px"},
+#    )
+#
+#    st.markdown(f"Image #{clicked} clicked" if clicked > -1 else "No image clicked")
+
+
+question = st.text_input("QUESTION", "", key="question")
 
 document = st.session_state.document
 loading_placeholder = st.empty()
@@ -114,13 +166,13 @@ if document is not None:
     col1, col2 = st.columns(2)
     image = document.preview
 
-
+question = st.session_state.question
 colors = ["blue", "red", "green"]
 if document is not None and question is not None and len(question) > 0:
     col2.header(f"Answers ({model_type})")
     with col2:
-        answers_placeholder = st.empty()
-        answers_loading_placeholder = st.empty()
+        answers_placeholder = st.container()
+        answers_loading_placeholder = st.container()
 
         with answers_loading_placeholder:
             # Run this (one-time) expensive operation outside of the processing