Upload app.py

app.py

@@ -1,9 +1,37 @@
-import streamlit as st
-import numpy as np
+import gradio as gr
 
-st.title("Movie Rating System")
+# Custom CSS for styling
+css = """
+    .criteria-name {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 4px;
+    }
+    .criteria-description {
+        font-size: 14px;
+        color: #555;
+        margin-bottom: 12px;
+    }
+    .subcriteria {
+        margin-bottom: 20px;
+        padding: 10px;
+        border-bottom: 1px solid #eee;
+    }
+    .category-header {
+        margin-top: 30px;
+        margin-bottom: 10px;
+        font-size: 20px;
+        font-weight: bold;
+        border-bottom: 2px solid #ccc;
+        padding-bottom: 4px;
+    }
+    .app-header {
+        text-align: center;
+        margin-bottom: 30px;
+    }
+"""
 
-# Define criteria grouped by category with subcategory descriptions
+# Define criteria grouped by category with names and descriptions
 criteria = {
     "Writing": [
         {"name": "Dialogue", "description": "Word choice, realism, subtext, and implications."},
@@ -49,23 +77,33 @@ criteria = {
     ]
 }
 
-ratings = {}
+def calculate_score(*ratings):
+    # Exclude blank ratings (value 0 means not rated)
+    valid = [r for r in ratings if r and r > 0]
+    if not valid:
+        return "Please rate at least one criterion."
+    avg = sum(valid) / len(valid)
+    # Quadratic scaling: f(x) = (1/18)*x^2 + (19/18)*x - (1/9)
+    scaled_score = (1/18) * (avg ** 2) + (19/18) * avg - (1/9)
+    return f"**Final Scaled Score:** {scaled_score:.2f} / 10"
 
-# Create sliders for each subcategory under its category header
-for group, subcriteria in criteria.items():
-    st.header(group)
-    for crit in subcriteria:
-        label = f"{crit['name']}: {crit['description']}"
-        ratings[crit["name"]] = st.slider(label, min_value=1, max_value=7, value=4)
+with gr.Blocks(css=css, title="Movie Rating System") as demo:
+    gr.Markdown("<h1 class='app-header'>Movie Rating System</h1>", unsafe_allow_html=True)
+    rating_components = []
+    # Loop over each category and its subcriteria
+    for group, subcriteria in criteria.items():
+        gr.Markdown(f"<div class='category-header'>{group}</div>", unsafe_allow_html=True)
+        for crit in subcriteria:
+            with gr.Box(elem_classes="subcriteria"):
+                gr.Markdown(f"<div class='criteria-name'>{crit['name']}</div>", unsafe_allow_html=True)
+                gr.Markdown(f"<div class='criteria-description'>{crit['description']}</div>", unsafe_allow_html=True)
+                # The Rating component: 0 means not rated (i.e. blank)
+                rating = gr.Rating(num_stars=7, value=0, label="")
+                rating_components.append(rating)
+                
+    calculate_btn = gr.Button("Calculate Score")
+    output = gr.Markdown("", elem_classes="app-header")
+    
+    calculate_btn.click(fn=calculate_score, inputs=rating_components, outputs=output)
 
-# When the button is pressed, calculate the overall score
-if st.button("Calculate Score"):
-    valid_ratings = list(ratings.values())
-    if valid_ratings:
-        avg = np.mean(valid_ratings)
-        # Quadratic mapping f(x) = (1/18)x^2 + (19/18)x - (1/9)
-        # so that f(1)=1, f(4)=5, and f(7)=10.
-        scaled_score = (1/18) * (avg ** 2) + (19/18) * avg - (1/9)
-        st.success(f"Final Scaled Score: {scaled_score:.2f} / 10")
-    else:
-        st.warning("Please rate at least one category.")
+demo.launch()