feat: QoL & better UI

app.py

@@ -89,61 +89,63 @@ def predict_and_compare(image):
         ssim_value = compare_face_ssim(image, ssim_reference, face_area)
         
         predicted_class = "True" if verified else "False"
-        probability = 1 - abs(distance) 
+        probability = 1 - abs(distance)
 
         success = f"""
-{chr(27)}[37m╭─[guest@terminal]─[~]{chr(27)}[0m
-{chr(27)}[37m╰─$ ssh [email protected]{chr(27)}[0m
-Connecting to husseumi.space on port 22...
-
-✧ Initiating facial authentication... ✧
-⋆｡°✩ Scanning face... ✩°｡⋆
-.｡*ﾟ Matching with database... ﾟ*｡.
-{chr(27)}[92m✧･ﾟ: Biometric verification complete! :･ﾟ✧{chr(27)}[0m
-
-{chr(27)}[96m╭─────━🌠 Welcome to Jelly's Space 🌠━─────╮
-│   *:･ﾟ✧ Authentication successful! ✧ﾟ･:*   │
-│        a-awawawa... welcome back!          │
-╰──────────━━━✧◝(⁰▿⁰)◜✧━━━──────────╯
-
-Last login: Wed Mar 13 12:34:56 2024 from 192.168.1.1
-This server is powered by dewaweb™ - Empowering Your Digital Dreams ⋆｡°✩
-
-┏━🎀 jerry@husseumi ⋆˙⟡♡[~]
-┗━➤ cat ~/.auth/metrics.log{chr(27)}[0m
-⭑⋆˙⟡ Facial Match   : {predicted_class}
-⭑⋆˙⟡ Match Score    : {probability:.4f}
-⭑⋆˙⟡ Similarity     : {ssim_value:.4f}
-
-{chr(27)}[96m┏━🎀 jerry@husseumi ⋆˙⟡♡[~]
-┗━➤ sudo cat /etc/secrets/flag.txt{chr(27)}[0m
-⋆｡°✩ {flag} ✩°｡⋆
-
-{chr(27)}[96m┏━🎀 jerry@husseumi ⋆˙⟡♡[~]
-┗━➤ exit{chr(27)}[0m
-✧･ﾟ: A-awawawa... goodbye! Have a lovely day! :･ﾟ✧
-.｡*ﾟ+.*.｡(っ°v°c)｡.*+.ﾟ*｡.
-
-Connection to husseumi.space closed.
+<div style="font-family: 'Courier New', monospace; background: #1a1b26; color: #a9b1d6; padding: 20px; border-radius: 8px;">
+    <span style="color: #7aa2f7">guest@terminal</span>:<span style="color: #9ece6a">~</span>$ ssh [email protected]<br>
+    Connecting to husseumi.space on port 22...<br><br>
+    
+    <span style="color: #bb9af7">✧ Initiating facial authentication... ✧</span><br>
+    <span style="color: #7dcfff">⋆｡°✩ Scanning face... ✩°｡⋆</span><br>
+    <span style="color: #7dcfff">.｡*ﾟ Matching with database... ﾟ*｡.</span><br>
+    <span style="color: #9ece6a">✧･ﾟ: Biometric verification complete! :･ﾟ✧</span><br><br>
+    
+    <div style="background: #1f2335; padding: 10px; border-radius: 4px; margin: 10px 0;">
+    <pre style="color: #7aa2f7; margin: 0; font-family: monospace;">
+╭──── 🌠 Welcome to Jelly's Space 🌠 ─────╮
+│   *:･ﾟ✧ Authentication successful! ✧ﾟ･:*  |
+│         a-awawawa... welcome back!        │
+╰─────────────- ✧◝(⁰▿⁰)◜✧ -────────────╯</pre>
+    </div>
+
+    Last login: Wed Mar 13 12:34:56 2024 from 192.168.1.1<br>
+    <span style="color: #bb9af7">This server is powered by dewaweb™ - Empowering Your Digital Dreams ⋆｡°✩</span><br><br>
+    
+    <span style="color: #7aa2f7">jerry@husseumi</span>:<span style="color: #9ece6a">~</span>$ cat ~/.auth/metrics.log<br>
+    <span style="color: #7dcfff">⭑⋆˙⟡ Facial Match   : {predicted_class}</span><br>
+    <span style="color: #7dcfff">⭑⋆˙⟡ Match Score    : {probability:.4f}</span><br>
+    <span style="color: #7dcfff">⭑⋆˙⟡ Similarity     : {ssim_value:.4f}</span><br><br>
+    
+    <span style="color: #7aa2f7">jerry@husseumi</span>:<span style="color: #9ece6a">~</span>$ sudo cat /etc/secrets/flag.txt<br>
+    <span style="color: #f7768e">⋆｡°✩ {flag} ✩°｡⋆</span><br><br>
+    
+    <span style="color: #7aa2f7">jerry@husseumi</span>:<span style="color: #9ece6a">~</span>$ exit<br>
+    <span style="color: #bb9af7">✧･ﾟ: A-awawawa... goodbye! Have a lovely day! :･ﾟ✧</span><br>
+    <span style="color: #bb9af7">.｡*ﾟ+.*.｡(っ°v°c)｡.*+.ﾟ*｡.</span><br><br>
+    
+    Connection to husseumi.space closed.
+</div>
 """
 
         fail = f"""
-{chr(27)}[37m╭─[guest@terminal]─[~]{chr(27)}[0m
-{chr(27)}[37m╰─$ ssh [email protected]{chr(27)}[0m
-Connecting to husseumi.space on port 22...
-
-✧ Initiating facial authentication... ✧
-⋆｡°✩ Scanning face... ✩°｡⋆
-.｡*ﾟ Matching with database... ﾟ*｡.
-{chr(27)}[91m(◞‸◟；) Biometric verification failed{chr(27)}[0m
-
-Authentication Report:
-｡･ﾟﾟ･ Face Match    : {predicted_class}
-｡･ﾟﾟ･ Match Score   : {probability:.4f}
-｡･ﾟﾟ･ Similarity    : {ssim_value:.4f}
-
-Permission denied (publickey,facial).
-Connection to husseumi.space closed.
+<div style="font-family: 'Courier New', monospace; background: #1a1b26; color: #a9b1d6; padding: 20px; border-radius: 8px;">
+    <span style="color: #7aa2f7">guest@terminal</span>:<span style="color: #9ece6a">~</span>$ ssh [email protected]<br>
+    Connecting to husseumi.space on port 22...<br><br>
+    
+    <span style="color: #bb9af7">✧ Initiating facial authentication... ✧</span><br>
+    <span style="color: #7dcfff">⋆｡°✩ Scanning face... ✩°｡⋆</span><br>
+    <span style="color: #7dcfff">.｡*ﾟ Matching with database... ﾟ*｡.</span><br>
+    <span style="color: #f7768e">(◞‸◟；) Biometric verification failed</span><br><br>
+    
+    Authentication Report:<br>
+    <span style="color: #7dcfff">｡･ﾟﾟ･ Face Match    : {predicted_class}</span><br>
+    <span style="color: #7dcfff">｡･ﾟﾟ･ Match Score   : {probability:.4f}</span><br>
+    <span style="color: #7dcfff">｡･ﾟﾟ･ Similarity    : {ssim_value:.4f}</span><br><br>
+    
+    <span style="color: #f7768e">Permission denied (publickey,facial).</span><br>
+    Connection to husseumi.space closed.
+</div>
 """
         return success if ssim_value>=0.96 and predicted_class == 'True' else fail
         
@@ -152,13 +154,36 @@ Connection to husseumi.space closed.
         if os.path.exists(temp_path):
             os.remove(temp_path)
 
+custom_css = """
+#output-html {
+    font-family: 'Courier New', monospace;
+    background: #1a1b26;
+    color: #a9b1d6;
+    padding: 20px;
+    border-radius: 8px;
+    min-height: 200px;
+    margin-top: 10px;
+}
+"""
+
+default_output = """
+<div style="font-family: 'Courier New', monospace; background: #1a1b26; color: #a9b1d6; padding: 20px; border-radius: 8px;">
+    <span style="color: #7aa2f7">guest@terminal</span>:<span style="color: #9ece6a">~</span>$ ssh [email protected]<br>
+    <span style="color: #7dcfff">Awaiting facial authentication...</span><br>
+    <span style="color: #bb9af7">Please submit an image to proceed ˚ ༘ ೀ⋆｡˚</span>
+</div>
+"""
+
 iface = gr.Interface(
     fn=predict_and_compare,
-    inputs=gr.Image(type="pil"),
-    outputs="text",
+    inputs=gr.Image(type="pil", label="Upload Image"),
+    outputs=gr.HTML(value=default_output),
     title="Jelly's Authentication System 🌠",
     description="Submit your image to authenticate!",
     allow_flagging="never",
+    css=custom_css,
+    theme="allenai/gradio-theme"
 )
 
-iface.launch()
+iface.queue()
+iface.launch(show_api=False)