Deploy Week 5 Monday notebook as standalone Gradio app

README.md

@@ -1,13 +1,22 @@
 ---
-title: 2026 24679 Styled Interface
-emoji: 🏆
-colorFrom: red
+title: SIDE A Listening Profile
+emoji: 🎧
+colorFrom: blue
 colorTo: yellow
 sdk: gradio
 sdk_version: 6.28.0
-python_version: '3.13'
+python_version: "3.13"
 app_file: app.py
 pinned: false
+short_description: Week 5 Monday — 24-679 (2026)
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# SIDE A Listening Profile
+
+Adapted from `04_styled_interface_extension.ipynb` for 24-679, Designing & Deploying AI/ML Systems, Week 5 Monday (September 21, 2026).
+
+The original callback, model revisions, examples, and interface are preserved. Notebook installation commands are in `requirements.txt`; the launch blocks on the Space server. Runs on CPU.
+
+## Run locally
+
+Use Python 3.13. Install `requirements.txt`, then run `python app.py`.

app.py

@@ -0,0 +1,485 @@
+FEATURE_COLUMNS = [
+    "About how many hours per week do you spend listening to music?",
+    "Approximately how many songs are in your music library?",
+    "Approximately how many playlists have you created yourself?",
+    "How often do you share music with others?",
+    "Which decade of music do you listen to most?",
+    "How often do you attend live music events?",
+    "Do you usually listen to music alone or with others?",
+]
+LIKERT = ["Never", "Rarely", "Sometimes", "Often", "Very Often"]
+DECADES = ["1970s and before", "1980s", "1990s", "2000s", "2010s", "2020s"]
+COMPANY = ["Alone", "With others", "Both equally"]
+LABEL_NAMES = {0: "Other preference", 1: "Prefers lyrics"}
+
+import sys
+assert sys.version_info[:2] == (3, 13), "Use Python 3.13 for this saved model."
+MODEL_REPO_ID = "ccm/2026-24679-lyrics-autogluon-classifier"
+MODEL_REVISION = "7a5f112e518964b65c46a3028bd0b179e7b6253e"
+ZIP_FILENAME = "autogluon_predictor_dir.zip"
+# Use the instructor's fixed model revision, including its native supporting files.
+from pathlib import Path
+import tempfile, zipfile
+from huggingface_hub import hf_hub_download
+archive = hf_hub_download(repo_id=MODEL_REPO_ID, filename=ZIP_FILENAME, revision=MODEL_REVISION)
+MODEL_DIR = Path(tempfile.mkdtemp(prefix="week5_model_"))
+with zipfile.ZipFile(archive) as z:
+    for item in z.infolist():
+        target = (MODEL_DIR / item.filename).resolve()
+        if not target.is_relative_to(MODEL_DIR.resolve()):
+            raise ValueError("Unexpected path in model archive.")
+    z.extractall(MODEL_DIR)
+
+from autogluon.tabular import TabularPredictor
+PREDICTOR = TabularPredictor.load(str(MODEL_DIR))
+assert PREDICTOR.label == "prefers_lyrics"
+assert set(PREDICTOR.features()) == set(FEATURE_COLUMNS)
+assert set(PREDICTOR.class_labels) == {0, 1}
+print("Loaded:", MODEL_REPO_ID, PREDICTOR.model_best)
+
+import math
+import pandas as pd
+import gradio as gr
+
+def predict_preference(hours, songs, playlists, sharing, decade, events, company):
+    values = [hours, songs, playlists]
+    if any(v is None for v in values):
+        return {}, "Enter listening hours, song count, and playlist count."
+    if not all(math.isfinite(float(v)) and float(v) >= 0 for v in values):
+        return {}, "Use finite, nonnegative numbers."
+    if hours > 168 or songs != int(songs) or playlists != int(playlists):
+        return {}, "Hours must be 0-168; song and playlist counts must be whole numbers."
+    if sharing not in LIKERT or events not in LIKERT or decade not in DECADES or company not in COMPANY:
+        return {}, "Choose each survey option from its list."
+    # Preserve the string categories used in 2026; last year's integer mapping was different.
+    row = pd.DataFrame([[float(hours), int(songs), int(playlists), sharing, decade, events, company]], columns=FEATURE_COLUMNS)
+    probabilities = PREDICTOR.predict_proba(row).iloc[0]
+    scores = {LABEL_NAMES[int(k)]: float(v) for k, v in probabilities.items()}
+    return scores, "These are model scores, not calibrated certainty. This small class survey does not establish general population preferences."
+
+from html import escape
+
+def render_profile(hours, songs, playlists, sharing, decade, events, company):
+    scores, message = predict_preference(hours, songs, playlists, sharing, decade, events, company)
+    if not scores:
+        return f"""<section class="score-card" aria-live="polite">
+            <p class="eyebrow">YOUR MODEL RESULT</p><h2>One more thing.</h2>
+            <p class="result-note">{escape(message)}</p>
+            <p class="result-foot">Your previous result has been cleared.</p></section>"""
+    winner = max(scores, key=scores.get)
+    bars = "".join(
+        f'<div class="score-row"><div><span>{escape(label)}</span>'
+        f'<strong>{score:.1%}</strong></div><div class="track" aria-hidden="true">'
+        f'<div class="fill" style="width:{100 * score:.3f}%"></div></div></div>'
+        for label, score in scores.items()
+    )
+    # Preserve both classes: "Other preference" does not necessarily mean instrumental music.
+    return f"""<section class="score-card" aria-live="polite">
+        <p class="eyebrow">YOUR MODEL RESULT</p>
+        <p class="big-score">{scores[winner]:.0%}</p>
+        <h2>{escape(winner)}</h2>
+        <p class="result-note">Highest class score for this listening profile.</p>
+        <div class="score-bars">{bars}</div>
+        <p class="result-foot">{escape(message)}</p>
+        <div class="card-bottom"><span>CLASS SURVEY / 2026</span><span>SIDE A ↗</span></div>
+    </section>"""
+
+# The presentation must preserve the actual model output.
+example = [10, 500, 5, "Sometimes", "2010s", "Rarely", "Alone"]
+scores, _ = predict_preference(*example)
+assert all(f"{score:.1%}" in render_profile(*example) for score in scores.values())
+assert "previous result has been cleared" in render_profile(10, None, *example[2:])
+
+
+# Change these tokens first when creating your own visual identity.
+THEME = gr.themes.Base(primary_hue="orange", neutral_hue="stone", font=["Arial", "sans-serif"], font_mono=["monospace"]).set(
+    body_background_fill="#f2eee5", body_background_fill_dark="#f2eee5",
+    body_text_color="#22211e", body_text_color_dark="#22211e",
+    block_background_fill="#f2eee5", block_background_fill_dark="#f2eee5",
+    block_border_width="0px", block_shadow="none", block_radius="0px",
+    block_label_text_color="#22211e", block_label_text_color_dark="#22211e",
+    input_background_fill="#fffcf6", input_background_fill_dark="#fffcf6",
+    input_border_color="#b3ad9e", input_border_color_dark="#b3ad9e",
+    input_radius="2px", input_shadow="none",
+    checkbox_label_background_fill="#e6e0d3", checkbox_label_background_fill_dark="#e6e0d3",
+    checkbox_label_background_fill_hover="#d5cebf", checkbox_label_background_fill_hover_dark="#d5cebf",
+    checkbox_label_background_fill_selected="#e6e0d3", checkbox_label_background_fill_selected_dark="#e6e0d3",
+    checkbox_background_color="#fffcf6", checkbox_background_color_dark="#fffcf6",
+    slider_color="#c74420", slider_color_dark="#c74420",
+)
+
+CSS_FRAME = """
+/* The outer page stops growing at 1120px; auto margins center it. */
+.gradio-container {
+    max-width:1120px !important;
+    margin:auto !important;
+    padding:0 !important;
+}
+
+/* IDs connect these rules to elem_id values in the interface cell. */
+#masthead, #hero, #form-heading, #live-note, #profile-output, #page-note {
+    padding:0;
+    border:0;
+}
+"""
+
+CSS_HEADER = """
+/* A flex row keeps the brand and subtitle apart. */
+.brandline {
+    display:flex;
+    justify-content:space-between;
+    gap:12px;
+    padding-bottom:16px;
+    border-bottom:2px solid #22211e;
+    font-size:11px;
+    font-weight:700;
+    letter-spacing:.14em;
+}
+
+.brandline strong {
+    font-size:19px;
+    letter-spacing:-.04em;
+    white-space:nowrap;
+}
+
+.hero {
+    display:flex;
+    justify-content:space-between;
+    align-items:center;
+    gap:25px;
+    padding:30px 0 32px;
+}
+
+.eyebrow {
+    margin:0 0 15px;
+    font-size:10px;
+    font-weight:700;
+    letter-spacing:.17em;
+    line-height:1.5;
+}
+
+/* clamp(minimum, preferred, maximum) limits fluid type size. */
+.hero h1 {
+    margin:0;
+    color:#22211e;
+    font-size:clamp(48px,7vw,88px);
+    line-height:.93;
+    letter-spacing:-.065em;
+    font-weight:800;
+}
+
+/* An HTML emphasis element becomes our colored title accent. */
+.hero h1 em {
+    font-style:normal;
+    color:#c74420;
+}
+
+.hero .intro {
+    font-size:15px;
+    line-height:1.5;
+    max-width:460px;
+    margin:18px 0 0;
+    color:#575145;
+}
+"""
+
+CSS_RECORD = """
+/* The first radial gradient sits over the repeating groove pattern. */
+.record {
+    width:200px;
+    aspect-ratio:1;
+    flex:none;
+    border-radius:50%;
+    background:radial-gradient(circle, #f2eee5 0 3%, #c74420 3.5% 24%, transparent 24.5%), repeating-radial-gradient(circle, #242321 0 2px, #373632 3px, #242321 4px);
+    box-shadow:9px 10px 0 #d9d2c3;
+    display:grid;
+    place-items:center;
+    transform:rotate(-16deg);
+}
+
+/* Style the label inside the disc, not other text on the page. */
+.record span {
+    font-size:12px;
+    font-weight:800;
+    color:#f2eee5;
+    padding-top:56px;
+    letter-spacing:.1em;
+}
+"""
+
+CSS_CONTROLS = """
+/* Gradio still manages row/column wrapping; CSS adds the spacing. */
+#workspace {
+    gap:32px;
+    align-items:stretch;
+}
+
+#controls {
+    gap:16px;
+}
+
+#controls .field {
+    padding:0;
+}
+
+#controls label, #controls .label-wrap {
+    font-size:12px;
+    font-weight:700;
+}
+
+/* Explicit label colors keep contrast in both browser color schemes. */
+#controls .field span, #controls .field label {
+    color:#22211e !important;
+}
+
+#controls [role="listbox"], #controls [role="option"] {
+    background:#fffcf6;
+    color:#22211e;
+}
+
+#controls input {
+    font-size:15px;
+    color:#22211e;
+}
+
+/* Preserve a visible keyboard-focus indicator. */
+#controls input:focus-visible, #controls button:focus-visible {
+    outline:3px solid #c74420 !important;
+    outline-offset:3px;
+}
+
+.form-heading {
+    display:flex;
+    gap:12px;
+    align-items:baseline;
+    padding:16px 0 4px;
+    border-top:2px solid #22211e;
+}
+
+.form-heading span {
+    color:#c74420;
+    font-size:12px;
+    font-weight:700;
+}
+
+.form-heading h2 {
+    margin:0;
+    font-size:25px;
+    line-height:1.2;
+    letter-spacing:-.04em;
+    white-space:nowrap;
+}
+
+.live-note {
+    display:flex;
+    align-items:center;
+    gap:8px;
+    color:#575145;
+    font-size:12px;
+    padding-top:3px;
+}
+
+/* A decorative cue next to explanatory text, not live network status. */
+.live-dot {
+    width:7px;
+    height:7px;
+    border-radius:50%;
+    background:#526339;
+}
+"""
+
+CSS_RESULTS = """
+/* A vertical flex container lets the footer use remaining space. */
+.score-card {
+    background:#22211e;
+    color:#f2eee5;
+    padding:30px;
+    min-height:460px;
+    box-sizing:border-box;
+    display:flex;
+    flex-direction:column;
+}
+
+.score-card .eyebrow {
+    color:#c4bcad;
+}
+
+.big-score {
+    font-size:80px;
+    font-weight:800;
+    letter-spacing:-.065em;
+    line-height:1;
+    margin:10px 0 8px;
+    color:#f2eee5;
+}
+
+.score-card h2 {
+    font-size:30px;
+    line-height:1.1;
+    letter-spacing:-.035em;
+    margin:0 0 12px;
+    color:#f2eee5;
+}
+
+.result-note {
+    font-size:13px;
+    line-height:1.5;
+    color:#c4bcad;
+    margin:0 0 23px;
+}
+
+.score-bars {
+    margin:0 0 24px;
+}
+
+.score-row {
+    margin-bottom:17px;
+}
+
+.score-row span, .score-row strong {
+    color:#f2eee5;
+}
+
+.card-bottom span {
+    color:#e78965;
+}
+
+/* Only the first direct div child: the class label and its percentage. */
+.score-row > div:first-child {
+    display:flex;
+    justify-content:space-between;
+    gap:15px;
+    font-size:12px;
+    margin-bottom:8px;
+}
+
+.track {
+    height:6px;
+    background:#4d493f;
+}
+
+/* Width comes from the model score in render_profile; CSS supplies its appearance. */
+.fill {
+    height:100%;
+    background:#e78965;
+}
+
+.result-foot {
+    font-size:12px;
+    line-height:1.55;
+    color:#c4bcad;
+    margin:0 0 22px;
+}
+
+/* margin-top:auto uses spare vertical space above this footer. */
+.card-bottom {
+    display:flex;
+    justify-content:space-between;
+    gap:12px;
+    border-top:1px solid #635c4e;
+    padding-top:15px;
+    margin-top:auto;
+    color:#e78965;
+    font-size:9px;
+    font-weight:700;
+    letter-spacing:.08em;
+}
+
+.page-note {
+    border-top:1px solid #b3ad9e;
+    margin-top:20px;
+    padding:14px 0;
+    color:#575145;
+    font-size:11px;
+    line-height:1.5;
+}
+"""
+
+CSS_RESPONSIVE = """
+/* These overrides apply at 650px and below. */
+@media (max-width:650px) {
+    .brandline {
+        font-size:9px;
+        align-items:center;
+    }
+
+    .hero {
+        padding:26px 0;
+    }
+
+    .record {
+        width:95px;
+        box-shadow:5px 6px 0 #d9d2c3;
+    }
+
+    .record span {
+        font-size:7px;
+        padding-top:28px;
+    }
+
+    .hero h1 {
+        font-size:49px;
+    }
+
+    .hero .intro {
+        font-size:13px;
+    }
+
+    #workspace {
+        gap:24px;
+    }
+
+    .score-card {
+        padding:24px;
+        min-height:430px;
+    }
+
+}
+
+/* On the narrowest layout, hide only the decorative record. */
+@media (max-width:390px) {
+    .record {
+        display:none;
+    }
+
+}
+"""
+
+# Rerun this cell after editing any styling section, then rerun the launch cell.
+CSS = "\n\n".join([
+    CSS_FRAME,
+    CSS_HEADER,
+    CSS_RECORD,
+    CSS_CONTROLS,
+    CSS_RESULTS,
+    CSS_RESPONSIVE,
+])
+
+with gr.Blocks(title="SIDE A · A listening profile", fill_width=True) as demo:
+    gr.HTML('<div class="brandline"><strong>SIDE A ↗</strong><span>A LISTENING PROFILE / VOL. 01</span></div>', elem_id="masthead")
+    gr.HTML("""<header class="hero"><div><p class="eyebrow">SEVEN ANSWERS. ONE CLASS MODEL.</p>
+        <h1>The way<br>you <em>listen.</em></h1>
+        <p class="intro">A small experiment in music habits. Set your listening profile and explore what our class model predicts.</p></div>
+        <div class="record" aria-hidden="true"><span>SIDE A</span></div></header>""", elem_id="hero")
+    with gr.Row(elem_id="workspace"):
+        with gr.Column(scale=6, min_width=300, elem_id="controls"):
+            gr.HTML('<div class="form-heading"><span>01 /</span><h2>Set your profile</h2></div>', elem_id="form-heading")
+            hours = gr.Slider(0, 168, value=10, step=.5, label="Listening hours / week", elem_classes=["field"])
+            with gr.Row():
+                songs = gr.Number(value=500, precision=0, label="Songs in library", elem_classes=["field"])
+                playlists = gr.Number(value=5, precision=0, label="Playlists created", elem_classes=["field"])
+            with gr.Row():
+                sharing = gr.Dropdown(LIKERT, value="Sometimes", label="Share music", elem_classes=["field"])
+                events = gr.Dropdown(LIKERT, value="Rarely", label="Go to live music", elem_classes=["field"])
+            decade = gr.Dropdown(DECADES, value="2010s", label="Your go-to decade", elem_classes=["field"])
+            company = gr.Radio(COMPANY, value="Alone", label="Usually listening…", elem_classes=["field"])
+            gr.HTML('<p class="live-note"><span class="live-dot" aria-hidden="true"></span>Updates as you change your answers.</p>', elem_id="live-note")
+        with gr.Column(scale=5, min_width=300):
+            profile = gr.HTML(elem_id="profile-output")
+    inputs = [hours, songs, playlists, sharing, decade, events, company]
+    gr.on(fn=render_profile, inputs=inputs, outputs=profile,
+          trigger_mode="always_last", concurrency_limit=1, api_name="render_profile")
+
+
+if __name__ == "__main__":
+    demo.launch(theme=THEME, css=CSS, footer_links=[], height=1000, server_name="0.0.0.0", server_port=7860)

requirements.txt

@@ -0,0 +1,4 @@
+gradio==6.28.0
+autogluon.tabular==1.6.1
+scikit-learn==1.7.2
+huggingface_hub