update changes

app.py

@@ -26,17 +26,17 @@ with open(emb_filename, 'rb') as fIn:
         #print(f'img_emb: {print(img_emb)}')
         #print(f'img_names: {print(img_names)}')  
 
-
-def search_text(query, top_k=1, top_rel_image=1):
+# helper functions
+def search_text(query, top_k=1):
     """" Search an image based on the text query.
     
     Args:
-        query ([string]): [query you want search for]
-        top_k (int, optional): [Amount of images o return]. Defaults to 1.
-        top_rel_image (int, optional): [Relevance label of the image]. Defaults to 1
+        query ([string]): query you want search for
+        top_k (int, optional): Amount of images o return]. Defaults to 1.
 
     Returns:
-        [list]: [list of images that are related to the query.]
+        [list]: list of images that are related to the query.
+        [list]: list of image embs that are related to the query.
     """
     # First, we encode the query.
     inputs = tokenizer([query],  padding=True, return_tensors="pt")
@@ -48,35 +48,102 @@ def search_text(query, top_k=1, top_rel_image=1):
     hits = util.semantic_search(query_emb, img_emb, top_k=top_k)[0]
 
     image = []
+    image_emb = []
     for hit in hits:
         #print(img_names[hit['corpus_id']])
         object = Image.open(os.path.join(
             "photos/", img_names[hit['corpus_id']]))
         image.append(object)
+        image_emb.append([img_emb[hit['corpus_id']]])
         #print(f'array length is: {len(image)}')
+    return image, image_emb
+
+def select_image(evt: gr.SelectData):
+    """ Returns the index of the selected image
+
+    Argrs:
+        evt (SelectData): the event we are listening to
+    
+    Returns:
+        int: index of the selected image
+    """
+    return evt.index
 
-    ret_indx = int(top_rel_image)
-    if ret_indx > top_k:
-        raise IndexError("given relevance image label is out of range")
-    else:
-        return image[ret_indx-1]
+def select_image_relevance(evt: gr.SelectData, selected_embs, image_relevance_state):
+    """ Returns the relevance of the selected image
+    
+    Args:
+        evt (SelectData): the event we are listening to
+        selected_embs (int): the index of the selected image
+        image_relevance_state (State): the current state of the image relevance
     
+    Returns:
+        state: the new state of the image relevance
+    """
+    image_relevance_state[selected_embs] = evt.value
+    return image_relevance_state
+
+
+callback = gr.CSVLogger()
+with gr.Blocks() as demo:
+    # create display
+    gr.Markdown(
+        """
+        # Text to Image using CLIP Model 📸
+
+        ---
+
+        My version of the Gradio Demo fo CLIP model with the option to select relevance level of each image.
+
+        This demo is based on assessment for the 🤗  Huggingface course 2. \n
+        To use it, simply write which image you are looking for. Read more at the links below.
+        """
+    )
+    with gr.Row():
+        with gr.Column():
+            query = gr.Textbox(lines=4, 
+                                label="Write what you are looking for in an image...",
+                                placeholder="Text Here...")
+            top_k = gr.Slider(0, 5, step=1)
+        with gr.Column():
+            gallery = gr.Gallery(
+                label="Generated images", show_label=False, elem_id="gallery"
+                ).style(grid=[3], height="auto")
+            relevance = gr.Dropdown(list(range(0, 6)), multiselect=False,
+                                    label="How relevent is this image to your input text?")
+    with gr.Row():
+        with gr.Column():
+            submit_btn = gr.Button("Submit")
+        with gr.Column():
+            save_btn = gr.Button("Save")
+    gr.Markdown("## Here are some examples you can use:")
+    gr.Examples(examples, [query, top_k])
+    
+    # when user input query and top_k
+    gallery_embs = [[] for _ in range(top_k.value)]
+    submit_btn.click(search_text, [query, top_k], [gallery, gallery_embs])
+    image_relevance = {embs: 0 for embs in gallery_embs}
+    image_relevance_state = gr.State(image_relevance, label="image_relevance_state")
+    selected_index = 0
+    callback.setup([image_relevance_state])
+    
+    # when user select an image in the gallery
+    gallery.select(select_image, None, selected_index)
+    # when user select the relevance of the image
+    relevance.select(fn=select_image_relevance, 
+                     input=[gallery_embs[selected_index], image_relevance_state], 
+                     output=image_relevance_state)
+    
+    # when user click save button
+    # we will flag the current image_relevance_state
+    save_btn.click(lambda *args: callback.flag(args), [image_relevance_state], None, preprocess=False)
+    gallery_embs = []
+
+    gr.Markdown(
+        """
+        You find more information about this demo on my ✨ github repository [marcelcastrobr](https://github.com/marcelcastrobr/huggingface_course2)
+        """
+    )
 
-iface = gr.Interface(
-    title = "Text to Image using CLIP Model 📸",
-    description = "My version of the Gradio Demo fo CLIP model. \n This demo is based on assessment for the 🤗  Huggingface course 2. \n To use it, simply write which image you are looking for. Read more at the links below.",
-    article = "You find more information about this demo on my ✨ github repository [marcelcastrobr](https://github.com/marcelcastrobr/huggingface_course2)",
-    fn=search_text, 
-    inputs=[
-        gr.Textbox(lines=4,
-            label="Write what you are looking for in an image...",
-            placeholder="Text Here..."),
-        gr.Slider(0, 5, step=1),
-        gr.Dropdown(list(range(0, 6)), multiselect=False,
-                    label="Relevance Image Label")
-    ],
-    outputs=[gr.Image(
-            label="Generated images", show_label=False, elem_id="output image"
-        ).style(height="auto", width="auto")]
-    ,examples=examples
-    ).launch(debug=True)
+if __name__ == "__main__":
+    demo.launch(debug=True)

flagged/log.csv

@@ -0,0 +1,2 @@
+Write what you are looking for in an image...,top_k,Relevance Image Label,Generated images,flag,username,timestamp
+cat,3,2,/Users/zhilinzhou/Local-documents/Workspace/CLIP-image-search/flagged/Generated images/tmphv4zf24i.png,,,2023-04-03 20:56:01.812245