Upload app.py

app.py

@@ -0,0 +1,199 @@
+import gradio as gr
+import requests
+
+SERVERLESS_URL = "https://pepe-semantics-vdn32ryg7q-uc.a.run.app/predict"
+
+gTop = []
+linkTop = []
+
+
+def predict(text):
+    global gTop
+    global linkTop
+
+    r = requests.post(SERVERLESS_URL, json={"text": text})
+    dic = r.json()
+    links = eval(dic["result"])
+    gTop = links[:5]
+
+    linkTop = []
+    for link in gTop:
+        path = "![ALT TEXT](" + link + ")"
+        linkTop.append(path)
+
+    return linkTop
+
+
+callback = gr.CSVLogger()
+
+css_bg_img = ".gradio-container {background-image: url('file=https://i.kym-cdn.com/photos/images/original/001/440/489/55b.png'); background-position: center;}"
+
+
+with gr.Blocks(css=css_bg_img) as demo:
+    gr.Markdown(
+        """<h1 style='text-align: center;'><span style="background-color:white;">PEPE-Sematics</span></h1>"""
+    )
+    gr.Markdown(
+        """
+        <p style="text-align:center;background-color: #FFFFFF" ><b>The world of GIFs needs saviour. While it has initially thrived on the legacy
+        of a few GIFs, the Gifverse is becoming chaotic and it is becoming very difficult to find good Gifs. 
+        Swoops in PEPE-Sematic to help those in need.<b></p>
+
+        <center>
+            <iframe src="https://giphy.com/embed/rBSB0tULImCv9DJi1P" width="480" height="361" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></p>
+        </center>
+        <p style="text-align:center;background-color: #FFFFFF"> PEPE-Sematics adopts from the <a href="https://github.com/xingyaoww/gif-reply" style='color:blue'>PEPE model</a>
+        and uses MLOps to bring it to your browser. PEPE-Sematics present to you multiple recommendations to choose from.
+        As fellow Giffer's we know it is never enough unless you spam your bae or friend or an annoying colleague, thus multiple 
+        recommedations is the only way to go about it. To ease your confusion we also provide a top recommendation based on our 
+        algorithm.</p>
+    """
+    )
+
+    gr.Markdown(
+        """<center><h2><span style="background-color:white;">Test it out</span></h2><center>"""
+    )
+
+    text_input = gr.Textbox(
+        label="Input", placeholder="Type something to get cool gifs \N{smile}"
+    )
+    with gr.Row():
+        submit_button = gr.Button("Submit")
+
+    with gr.Row():
+        gr.Markdown(
+            """<center><h2><span style="background-color:white;">Top Recommedation</span></h2><center>"""
+        )
+    with gr.Row():
+        image0 = gr.Markdown(
+            "<iframe src='https://giphy.com/embed/1YeNJK6FptDdq1q59K' width='480' height='280' frameBorder='0' class='giphy-embed' allowFullScreen></iframe>"
+        )
+        with gr.Row():
+            image0_up = gr.Button("\N{thumbs up sign}")
+            image0_down = gr.Button("\N{thumbs down sign}")
+            image0_flag = gr.Button("Flag")
+    gr.Markdown(
+        """<center><h2><span style="background-color:white;">Recommended GIFs</span></h2><center>"""
+    )
+    with gr.Row():
+        with gr.Column(scale=1, min_width=300):
+            image1 = gr.Markdown(
+                "<iframe src='https://giphy.com/embed/enCWEo0vG25Ow' width='300' height='280' frameBorder='0' class='giphy-embed' allowFullScreen></iframe>"
+            )
+            with gr.Row():
+                image1_up = gr.Button("\N{thumbs up sign}")
+                image1_down = gr.Button("\N{thumbs down sign}")
+                image1_flag = gr.Button("Flag")
+        with gr.Column(scale=1, min_width=300):
+            image2 = gr.Markdown(
+                "<iframe src='https://giphy.com/embed/l41YouCUUcreUabHW' width='300' height='280' frameBorder='0' class='giphy-embed' allowFullScreen></iframe>"
+            )
+            with gr.Row():
+                image2_up = gr.Button("\N{thumbs up sign}")
+                image2_down = gr.Button("\N{thumbs down sign}")
+                image2_flag = gr.Button("Flag")
+        with gr.Column(scale=1, min_width=300):
+            image3 = gr.Markdown(
+                "<iframe src='https://giphy.com/embed/SJWZDnQfQe46YAvIxj' width='300' height='280' frameBorder='0' class='giphy-embed' allowFullScreen></iframe>"
+            )
+            with gr.Row():
+                image3_up = gr.Button("\N{thumbs up sign}")
+                image3_down = gr.Button("\N{thumbs down sign}")
+                image3_flag = gr.Button("Flag")
+        with gr.Column(scale=1, min_width=300):
+            image4 = gr.Markdown(
+                "<iframe src='https://giphy.com/embed/g7GKcSzwQfugw' width='300' height='280' frameBorder='0' class='giphy-embed' allowFullScreen></iframe>"
+            )
+            with gr.Row():
+                image4_up = gr.Button("\N{thumbs up sign}")
+                image4_down = gr.Button("\N{thumbs down sign}")
+                image4_flag = gr.Button("Flag")
+
+    outputs = submit_button.click(
+        predict,
+        inputs=text_input,
+        outputs=[image0, image1, image2, image3, image4],
+        scroll_to_output=True,
+    )
+
+    print(outputs)
+
+    callback.setup([text_input], "flagged_data")
+
+    image1_up.click(
+        lambda *args: callback.flag(args, flag_option="Up", username=gTop[1]),
+        [text_input],
+        None,
+    )
+    image2_up.click(
+        lambda *args: callback.flag(args, flag_option="Up", username=gTop[2]),
+        [text_input],
+        None,
+    )
+    image3_up.click(
+        lambda *args: callback.flag(args, flag_option="Up", username=gTop[3]),
+        [text_input],
+        None,
+    )
+    image4_up.click(
+        lambda *args: callback.flag(args, flag_option="Up", username=gTop[4]),
+        [text_input],
+        None,
+    )
+    image0_up.click(
+        lambda *args: callback.flag(args, flag_option="Up", username=gTop[0]),
+        [text_input],
+        None,
+    )
+    image1_down.click(
+        lambda *args: callback.flag(args, flag_option="Down", username=gTop[1]),
+        [text_input],
+        None,
+    )
+    image2_down.click(
+        lambda *args: callback.flag(args, flag_option="Down", username=gTop[2]),
+        [text_input],
+        None,
+    )
+    image3_down.click(
+        lambda *args: callback.flag(args, flag_option="Down", username=gTop[3]),
+        [text_input],
+        None,
+    )
+    image4_down.click(
+        lambda *args: callback.flag(args, flag_option="Down", username=gTop[4]),
+        [text_input],
+        None,
+    )
+    image0_down.click(
+        lambda *args: callback.flag(args, flag_option="Down", username=gTop[0]),
+        [text_input],
+        None,
+    )
+    image1_flag.click(
+        lambda *args: callback.flag(args, flag_option="Flag", username=gTop[1]),
+        [text_input],
+        None,
+    )
+    image2_flag.click(
+        lambda *args: callback.flag(args, flag_option="Flag", username=gTop[2]),
+        [text_input],
+        None,
+    )
+    image3_flag.click(
+        lambda *args: callback.flag(args, flag_option="Flag", username=gTop[3]),
+        [text_input],
+        None,
+    )
+    image4_flag.click(
+        lambda *args: callback.flag(args, flag_option="Flag", username=gTop[4]),
+        [text_input],
+        None,
+    )
+    image0_flag.click(
+        lambda *args: callback.flag(args, flag_option="Flag", username=gTop[0]),
+        [text_input],
+        None,
+    )
+
+demo.launch(debug=False, share=True)