Update app.py

app.py

@@ -35,26 +35,93 @@ def embed_query(text: str):
 
 def search_games(query):
     if not query.strip():
-        return "Please enter a query."
+        return ""
     q_emb = embed_query(query)
     scores, retrieved_ds = ds.get_nearest_examples("embeddings", q_emb, k=5)
-    results = []
+    results_html = ""
     for name, desc, dist in zip(
         retrieved_ds["game_name"],
         retrieved_ds["game_description"],
         scores
     ):
-        results.append(f"**{name}**\n\n{desc}\n\nDistance: {dist:.4f}")
-    return "\n\n---\n\n".join(results)
-
-# Build Gradio interface
-iface = gr.Interface(
-    fn=search_games,
-    inputs=gr.Textbox(lines=2, placeholder="Enter your game query here..."),
-    outputs=gr.Markdown(),
-    title="Steam Games Semantic Search",
-    description="Search similar Steam games by semantic similarity."
-)
+        results_html += f"""
+        <div class="result">
+            <div class="title">{name}</div>
+            <div class="description">{desc}</div>
+            <div class="distance">Distance: {dist:.4f}</div>
+        </div>
+        """
+    return results_html
+
+custom_css = """
+<style>
+  body, .gradio-container {
+    font-family: Arial, sans-serif;
+    margin: 2em;
+    background: url('/static/img/tlou.jpg') no-repeat center center fixed;
+    background-size: cover;
+    color: #fff;
+    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
+  }
+  input, textarea, button {
+    font-size: 1em;
+    padding: 0.7em;
+    border: 1px solid #444;
+    border-radius: 0.4em;
+    background: rgba(0,0,0,0.6);
+    color: #fff;
+    box-sizing: border-box;
+    transition: box-shadow 0.2s;
+  }
+  input:focus, textarea:focus {
+    outline: none;
+    box-shadow: 0 0 6px 2px #88aaff;
+    background: rgba(10, 30, 80, 0.7);
+  }
+  button {
+    cursor: pointer;
+    border: 1px solid #444;
+    background: rgba(0,0,0,0.7);
+    color: #fff;
+    transition: background 0.2s;
+    font-size: 1.1em;
+  }
+  button:hover {
+    background: rgba(50,70,140,0.85);
+  }
+  .result {
+    border-bottom: 1px solid rgba(255,255,255,0.3);
+    padding: 1em 0;
+  }
+  .title {
+    font-weight: bold;
+    font-size: 1.2em;
+  }
+  .description { margin-top: 0.5em; }
+  .distance {
+    color: rgba(255,255,255,0.7);
+    font-size: 0.9em;
+    margin-top: 0.3em;
+  }
+</style>
+"""
+
+with gr.Blocks() as demo:
+    gr.HTML("<h2>Steam Game Semantic Search AI Demo (Trained on 200 games)</h2>")
+    gr.HTML("<h5>by: Alexis Mandario</h5>")
+    gr.HTML("""
+    <h5>Note: This web app fetches, tokenizes, and embeds 200 games from "Steam" (a gaming platform) using its API. 
+    Only the games included in the training data will appear in the search results. 
+    Only the top 5 similar games will be shown.</h5>
+    """)
+
+    query = gr.Textbox(placeholder="Enter search query: Describe the game you want here.", lines=1)
+    submit_btn = gr.Button("Search")
+    results = gr.HTML()
+
+    submit_btn.click(search_games, inputs=query, outputs=results)
+
+    gr.HTML(custom_css)
 
 if __name__ == "__main__":
-    iface.launch()
+    demo.launch()