Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,40 +1,65 @@
-import altair as alt
-import numpy as np
-import pandas as pd
 import streamlit as st
+from streamlit_drawable_canvas import st_canvas
+import numpy as np
+from tensorflow.keras.models import load_model
+from tensorflow.keras.preprocessing.image import img_to_array
+from PIL import Image
+
+# Branding Colors
+PRIMARY_COLOR = "#0F2C59"   # Procelevate navy
+ACCENT_COLOR = "#FFD700"    # Gold highlight
+BG_COLOR = "#F5F5F5"        # Light background
+
+# Load Model
+model = load_model("quickdraw_model.h5")
+CLASSES = ["cat", "dog", "house", "car", "tree", "airplane", "sun", "fish", "flower", "bird"]
+
+# Page Config
+st.set_page_config(page_title="Guess the Doodle - Procelevate", page_icon="✏️", layout="wide")
+
+# Sidebar with logo
+st.sidebar.image("procelevate_logo.png", use_column_width=True)
+st.sidebar.markdown(
+    f"<h3 style='color:{PRIMARY_COLOR};'>🚀 Procelevate Academy</h3>"
+    "<p>Where AI meets fun & learning!</p>",
+    unsafe_allow_html=True
+)
+
+# Title Section
+st.markdown(
+    f"""
+    <div style='text-align:center;'>
+        <h1 style='color:{PRIMARY_COLOR};'>🎨 Guess the Doodle – AI Game</h1>
+        <p style='font-size:18px;'>Draw something below, and let AI guess it in real-time!</p>
+    </div>
+    """,
+    unsafe_allow_html=True
+)
+
+# Drawing Canvas
+canvas_result = st_canvas(
+    fill_color=BG_COLOR, stroke_width=10, stroke_color="black",
+    background_color="white", width=280, height=280,
+    drawing_mode="freedraw", key="canvas",
+)
+
+# Prediction
+if canvas_result.image_data is not None:
+    img = Image.fromarray((canvas_result.image_data).astype("uint8")).convert("L")
+    img = img.resize((28,28))
+    img_array = img_to_array(img) / 255.0
+    img_array = np.expand_dims(img_array, axis=0)
+
+    preds = model.predict(img_array)[0]
+    top_indices = preds.argsort()[-3:][::-1]
+
+    st.markdown(f"<h2 style='color:{ACCENT_COLOR};'>🤖 AI’s Best Guesses:</h2>", unsafe_allow_html=True)
+
+    for idx in top_indices:
+        bar = f"<div style='background:{ACCENT_COLOR}; width:{int(preds[idx]*100)}%; height:20px;'></div>"
+        st.markdown(
+            f"<p><b>{CLASSES[idx]}</b> – {preds[idx]*100:.2f}%</p>{bar}<br>",
+            unsafe_allow_html=True
+        )
 
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))
+st.success("💡 Tip: Try drawing a cat 🐱, car 🚗, tree 🌳, or sun ☀️!")