Spaces:
Build error
Build error
| import streamlit as st | |
| import os | |
| import sys | |
| import time | |
| sys.path.insert(0, os.path.abspath(os.path.dirname(__file__))) | |
| from client import JewelryShopEnv | |
| from models import JewelryAction | |
| from inference import get_model_action | |
| from openai import OpenAI | |
| from dotenv import load_dotenv | |
| load_dotenv() | |
| st.set_page_config(page_title="Jewelry Shop AI Agent", page_icon="💎", layout="wide", initial_sidebar_state="expanded") | |
| # ── PREMIUM CSS ── | |
| st.markdown(""" | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); | |
| :root { | |
| --bg-primary: #0F1117; | |
| --bg-card: rgba(30, 34, 50, 0.7); | |
| --bg-card-hover: rgba(40, 44, 65, 0.85); | |
| --border-glass: rgba(255,255,255,0.08); | |
| --accent-red: #FF4B6E; | |
| --accent-green: #00E09E; | |
| --accent-blue: #5B8DEF; | |
| --accent-gold: #FFD700; | |
| --accent-purple: #A78BFA; | |
| --text-primary: #F1F5F9; | |
| --text-muted: #94A3B8; | |
| } | |
| html, body, [class*="css"] { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .stApp { | |
| background: linear-gradient(135deg, #0F1117 0%, #1A1B2E 50%, #0F1117 100%); | |
| color: var(--text-primary); | |
| } | |
| /* Hide default streamlit elements */ | |
| #MainMenu, footer, header {visibility: hidden;} | |
| .hero-title { | |
| font-size: 2.4rem; | |
| font-weight: 800; | |
| background: linear-gradient(135deg, #FFD700, #FF6B6B, #A78BFA); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| margin-bottom: 0.3rem; | |
| letter-spacing: -0.5px; | |
| } | |
| .hero-sub { | |
| color: var(--text-muted); | |
| font-size: 1rem; | |
| font-weight: 400; | |
| margin-bottom: 1.5rem; | |
| line-height: 1.6; | |
| } | |
| /* Glassmorphism metric cards */ | |
| .glass-card { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border: 1px solid var(--border-glass); | |
| border-radius: 16px; | |
| padding: 20px 16px; | |
| text-align: center; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glass-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; left: 0; right: 0; | |
| height: 3px; | |
| border-radius: 16px 16px 0 0; | |
| } | |
| .glass-card:hover { | |
| background: var(--bg-card-hover); | |
| transform: translateY(-3px); | |
| box-shadow: 0 12px 40px rgba(0,0,0,0.3); | |
| } | |
| .glass-card.phase::before { background: linear-gradient(90deg, #FF4B6E, #FF6B8A); } | |
| .glass-card.cash::before { background: linear-gradient(90deg, #00E09E, #00C9A7); } | |
| .glass-card.gold::before { background: linear-gradient(90deg, #FFD700, #FFA500); } | |
| .glass-card.items::before { background: linear-gradient(90deg, #5B8DEF, #818CF8); } | |
| .glass-card.price::before { background: linear-gradient(90deg, #A78BFA, #C084FC); } | |
| .card-value { | |
| font-size: 1.6rem; | |
| font-weight: 700; | |
| margin: 8px 0 4px; | |
| } | |
| .card-label { | |
| font-size: 0.7rem; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 1.5px; | |
| font-weight: 600; | |
| } | |
| .card-icon { font-size: 1.4rem; } | |
| .v-phase { color: #FF4B6E; } | |
| .v-cash { color: #00E09E; } | |
| .v-gold { color: #FFD700; } | |
| .v-items { color: #5B8DEF; } | |
| .v-price { color: #A78BFA; } | |
| /* Phase pipeline */ | |
| .phase-pipeline { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0; | |
| margin: 1.2rem 0; | |
| padding: 16px 24px; | |
| background: var(--bg-card); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid var(--border-glass); | |
| border-radius: 16px; | |
| } | |
| .phase-node { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 10px 24px; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| letter-spacing: 0.5px; | |
| background: rgba(255,255,255,0.04); | |
| border: 1px solid rgba(255,255,255,0.06); | |
| color: var(--text-muted); | |
| transition: all 0.3s ease; | |
| } | |
| .phase-node.active { | |
| color: white; | |
| box-shadow: 0 4px 20px rgba(0,0,0,0.3); | |
| } | |
| .phase-node.active.market { background: linear-gradient(135deg, #FF4B6E, #FF6B8A); border-color: #FF4B6E; } | |
| .phase-node.active.warehouse { background: linear-gradient(135deg, #5B8DEF, #818CF8); border-color: #5B8DEF; } | |
| .phase-node.active.showroom { background: linear-gradient(135deg, #00E09E, #00C9A7); border-color: #00E09E; } | |
| .phase-node.done { color: var(--accent-green); border-color: rgba(0,224,158,0.3); } | |
| .phase-arrow { color: var(--text-muted); font-size: 1.2rem; margin: 0 8px; } | |
| /* Log entries */ | |
| .log-entry { | |
| padding: 12px 16px; | |
| margin: 6px 0; | |
| border-radius: 12px; | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-glass); | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| font-size: 0.9rem; | |
| transition: all 0.2s ease; | |
| } | |
| .log-entry:hover { background: var(--bg-card-hover); } | |
| .log-badge { | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| flex-shrink: 0; | |
| } | |
| .badge-market { background: rgba(255,75,110,0.15); color: #FF4B6E; } | |
| .badge-warehouse { background: rgba(91,141,239,0.15); color: #5B8DEF; } | |
| .badge-showroom { background: rgba(0,224,158,0.15); color: #00E09E; } | |
| .log-action-pill { | |
| background: rgba(255,215,0,0.12); | |
| color: #FFD700; | |
| padding: 3px 10px; | |
| border-radius: 6px; | |
| font-family: 'JetBrains Mono', monospace; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .log-reward { | |
| margin-left: auto; | |
| font-weight: 700; | |
| font-size: 0.85rem; | |
| } | |
| .reward-pos { color: #00E09E; } | |
| .reward-zero { color: var(--text-muted); } | |
| .reward-neg { color: #FF4B6E; } | |
| .log-msg { | |
| color: var(--text-muted); | |
| font-size: 0.82rem; | |
| padding: 6px 16px 6px 40px; | |
| font-style: italic; | |
| } | |
| /* Section headers */ | |
| .section-header { | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin: 1.5rem 0 0.8rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| /* Results card */ | |
| .results-card { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid var(--border-glass); | |
| border-radius: 16px; | |
| padding: 24px; | |
| text-align: center; | |
| } | |
| .results-card.success { border-color: rgba(0,224,158,0.4); } | |
| .results-card.fail { border-color: rgba(255,75,110,0.4); } | |
| .results-score { | |
| font-size: 3rem; | |
| font-weight: 800; | |
| } | |
| /* Sidebar styling */ | |
| section[data-testid="stSidebar"] { | |
| background: linear-gradient(180deg, #151829 0%, #1A1D30 100%); | |
| border-right: 1px solid var(--border-glass); | |
| } | |
| section[data-testid="stSidebar"] .stSelectbox label, | |
| section[data-testid="stSidebar"] .stTextInput label { | |
| color: var(--text-muted) !important; | |
| font-size: 0.8rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| /* Start button */ | |
| .stButton>button { | |
| background: linear-gradient(135deg, #FF4B6E 0%, #FF6B8A 50%, #A78BFA 100%); | |
| color: white; | |
| border: none; | |
| border-radius: 12px; | |
| padding: 12px 24px; | |
| font-weight: 700; | |
| font-size: 1rem; | |
| letter-spacing: 0.5px; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| width: 100%; | |
| box-shadow: 0 4px 15px rgba(255,75,110,0.3); | |
| } | |
| .stButton>button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 8px 25px rgba(255,75,110,0.5); | |
| color: white; | |
| } | |
| /* Chart containers */ | |
| .chart-container { | |
| background: var(--bg-card); | |
| backdrop-filter: blur(12px); | |
| border: 1px solid var(--border-glass); | |
| border-radius: 16px; | |
| padding: 16px; | |
| margin: 8px 0; | |
| } | |
| </style> | |
| """, unsafe_allow_html=True) | |
| # ── HELPER FUNCTIONS ── | |
| def render_phase_pipeline(current_phase, done): | |
| phases = ["market", "warehouse", "showroom"] | |
| icons = {"market": "📈", "warehouse": "🏭", "showroom": "🛍️"} | |
| labels = {"market": "MARKET", "warehouse": "WAREHOUSE", "showroom": "SHOWROOM"} | |
| current_idx = phases.index(current_phase) if current_phase in phases else 0 | |
| html = '<div class="phase-pipeline">' | |
| for i, p in enumerate(phases): | |
| cls = "phase-node" | |
| if done: | |
| cls += " done" | |
| elif i == current_idx: | |
| cls += f" active {p}" | |
| elif i < current_idx: | |
| cls += " done" | |
| html += f'<div class="{cls}">{icons[p]} {labels[p]}</div>' | |
| if i < len(phases) - 1: | |
| html += '<span class="phase-arrow">→</span>' | |
| html += '</div>' | |
| st.markdown(html, unsafe_allow_html=True) | |
| def render_metrics(obs): | |
| crafted = [f"{v} {k}" for k, v in obs.inventory.items() if v > 0] | |
| items_str = ", ".join(crafted) if crafted else "—" | |
| cols = st.columns(5) | |
| cards = [ | |
| ("phase", "🔄", str(obs.phase).upper(), "CURRENT PHASE", "v-phase"), | |
| ("cash", "💵", f"${obs.cash:,.2f}", "CASH BALANCE", "v-cash"), | |
| ("gold", "🪙", f"{obs.gold_oz:.2f} oz", "RAW GOLD", "v-gold"), | |
| ("items", "💍", items_str, "CRAFTED ITEMS", "v-items"), | |
| ("price", "📊", f"${obs.gold_price:.2f}", "GOLD PRICE/OZ", "v-price"), | |
| ] | |
| for col, (ctype, icon, value, label, vcls) in zip(cols, cards): | |
| with col: | |
| st.markdown(f''' | |
| <div class="glass-card {ctype}"> | |
| <div class="card-icon">{icon}</div> | |
| <div class="card-value {vcls}">{value}</div> | |
| <div class="card-label">{label}</div> | |
| </div>''', unsafe_allow_html=True) | |
| def format_log_entry(step, phase, action_str, reward, msg=""): | |
| badge_cls = f"badge-{phase}" | |
| if reward > 0: | |
| r_cls, r_sign = "reward-pos", "+" | |
| elif reward < 0: | |
| r_cls, r_sign = "reward-neg", "" | |
| else: | |
| r_cls, r_sign = "reward-zero", "" | |
| html = f''' | |
| <div class="log-entry"> | |
| <span style="color:var(--text-muted);font-weight:600;min-width:50px;">#{step}</span> | |
| <span class="log-badge {badge_cls}">{phase.upper()}</span> | |
| <span class="log-action-pill">{action_str}</span> | |
| <span class="log-reward {r_cls}">{r_sign}{reward:.3f}</span> | |
| </div>''' | |
| if msg: | |
| html += f'<div class="log-msg">💬 {msg}</div>' | |
| return html | |
| # ── MAIN APP ── | |
| def main(): | |
| # ── SIDEBAR ── | |
| with st.sidebar: | |
| st.markdown(""" | |
| <div style="text-align:center;margin-bottom:1.5rem;"> | |
| <div style="font-size:2.5rem;">💎</div> | |
| <div style="font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,#FFD700,#FF6B6B); | |
| -webkit-background-clip:text;-webkit-text-fill-color:transparent;">ShopManager AI</div> | |
| <div style="color:var(--text-muted);font-size:0.75rem;margin-top:4px;">Powered by GRPO Fine-tuning</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.markdown("---") | |
| hf_token = st.text_input("🔑 HuggingFace Token", type="password", | |
| value=os.getenv("HF_TOKEN", ""), | |
| help="Your HF API token for model inference") | |
| models = [ | |
| "hard007ik/shopmanager-grpo-qwen3", | |
| "meta-llama/Llama-3.3-70B-Instruct", | |
| "Qwen/Qwen2.5-72B-Instruct", | |
| ] | |
| model_name = st.selectbox("🤖 AI Model", models) | |
| env_url = st.text_input("🌐 Environment URL", | |
| value="https://hard007ik-shopmanagereng.hf.space") | |
| task_type = st.selectbox("🎯 Task Focus", [ | |
| "market_timing", "demand_crafter", "profit_negotiator" | |
| ], help="Controls reward weighting across phases") | |
| task_labels = { | |
| "market_timing": "Market 60% · Craft 20% · Sell 20%", | |
| "demand_crafter": "Market 20% · Craft 60% · Sell 20%", | |
| "profit_negotiator": "Market 20% · Craft 20% · Sell 60%", | |
| } | |
| st.caption(task_labels[task_type]) | |
| st.markdown("<br>", unsafe_allow_html=True) | |
| start_btn = st.button("🚀 Start New Episode", use_container_width=True) | |
| st.markdown("---") | |
| st.markdown(""" | |
| <div style="text-align:center;color:var(--text-muted);font-size:0.7rem;"> | |
| <div>Model: <b>shopmanager-grpo-qwen3</b></div> | |
| <div style="margin-top:4px;">Env: <b>HuggingFace Spaces</b></div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # ── HERO HEADER ── | |
| st.markdown(""" | |
| <div class="hero-title">💎 Jewelry Shop AI Agent</div> | |
| <div class="hero-sub"> | |
| Watch your fine-tuned AI autonomously manage a jewelry business — | |
| buying gold at the right price, crafting high-demand products, and negotiating maximum profit with customers. | |
| </div> | |
| """, unsafe_allow_html=True) | |
| # ── PLACEHOLDERS ── | |
| pipeline_ph = st.empty() | |
| metrics_ph = st.empty() | |
| chart_cols_ph = st.empty() | |
| st.markdown('<div class="section-header">📜 Live Event Log</div>', unsafe_allow_html=True) | |
| log_ph = st.empty() | |
| result_ph = st.empty() | |
| # ── IDLE STATE ── | |
| if not start_btn: | |
| pipeline_ph.markdown(""" | |
| <div class="phase-pipeline"> | |
| <div class="phase-node">📈 MARKET</div> | |
| <span class="phase-arrow">→</span> | |
| <div class="phase-node">🏭 WAREHOUSE</div> | |
| <span class="phase-arrow">→</span> | |
| <div class="phase-node">🛍️ SHOWROOM</div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| st.info("👈 Configure settings in the sidebar and click **Start New Episode** to watch the AI run!") | |
| return | |
| # ── VALIDATION ── | |
| if not hf_token: | |
| st.error("🔑 Please enter your HuggingFace API Token in the sidebar.") | |
| return | |
| # ── INIT ENV ── | |
| with st.spinner("🔌 Connecting to environment server..."): | |
| try: | |
| env = JewelryShopEnv(base_url=env_url).sync() | |
| result = env.reset(task_id=task_type) | |
| obs = result.observation | |
| client = OpenAI(base_url="https://router.huggingface.co/v1", api_key=hf_token) | |
| except Exception as e: | |
| st.error(f"❌ Failed to connect: {e}") | |
| return | |
| # ── TRACKING STATE ── | |
| history = [] | |
| rewards_list = [] | |
| gold_prices = list(obs.gold_price_history) if obs.gold_price_history else [obs.gold_price] | |
| step_num = 1 | |
| done = result.done | |
| last_reward = result.reward or 0.0 | |
| log_html = "" | |
| phase_order = [] | |
| # Render initial state | |
| with pipeline_ph.container(): | |
| render_phase_pipeline(obs.phase, False) | |
| with metrics_ph.container(): | |
| render_metrics(obs) | |
| # ── AUTOMATED EPISODE LOOP ── | |
| while not done and step_num <= 15: | |
| # 1. Ask AI for action | |
| try: | |
| import inference | |
| orig_model = inference.MODEL_NAME | |
| inference.MODEL_NAME = model_name | |
| action, action_str = get_model_action( | |
| client=client, step=step_num, obs=obs, | |
| last_reward=last_reward, history=history | |
| ) | |
| inference.MODEL_NAME = orig_model | |
| except Exception as e: | |
| log_html += f'<div class="log-entry" style="border-color:#FF4B6E;"><span style="color:#FF4B6E;">❌ AI Error: {e}</span></div>' | |
| log_ph.markdown(log_html, unsafe_allow_html=True) | |
| break | |
| current_phase = obs.phase | |
| phase_order.append(current_phase) | |
| # 2. Step environment | |
| try: | |
| result = env.step(action) | |
| obs = result.observation | |
| reward = result.reward or 0.0 | |
| done = result.done | |
| rewards_list.append(reward) | |
| history.append(f"Step {step_num} ({current_phase}): '{action_str}' -> reward {reward:+.2f}") | |
| # Track gold prices | |
| if obs.gold_price_history: | |
| gold_prices = list(obs.gold_price_history) | |
| elif obs.gold_price and obs.gold_price not in gold_prices: | |
| gold_prices.append(obs.gold_price) | |
| except Exception as e: | |
| log_html += f'<div class="log-entry" style="border-color:#FF4B6E;"><span style="color:#FF4B6E;">❌ Env Error: {e}</span></div>' | |
| log_ph.markdown(log_html, unsafe_allow_html=True) | |
| break | |
| # 3. Update all displays | |
| log_html += format_log_entry(step_num, current_phase, action_str, reward, obs.message) | |
| log_ph.markdown(log_html, unsafe_allow_html=True) | |
| with pipeline_ph.container(): | |
| render_phase_pipeline(obs.phase if not done else "showroom", done) | |
| with metrics_ph.container(): | |
| render_metrics(obs) | |
| # 4. Update charts | |
| with chart_cols_ph.container(): | |
| c1, c2, c3 = st.columns(3) | |
| with c1: | |
| st.markdown('<div class="chart-container">', unsafe_allow_html=True) | |
| st.caption("📈 Gold Price Trend") | |
| if len(gold_prices) > 1: | |
| st.line_chart(gold_prices, height=180) | |
| else: | |
| st.info(f"Current: ${gold_prices[0]:.2f}/oz") | |
| st.markdown('</div>', unsafe_allow_html=True) | |
| with c2: | |
| st.markdown('<div class="chart-container">', unsafe_allow_html=True) | |
| st.caption("📊 Demand Forecast") | |
| forecast = getattr(obs, "demand_forecast", {}) or {} | |
| if forecast: | |
| st.bar_chart(forecast, height=180) | |
| else: | |
| demand = getattr(obs, "demand", {}) or {} | |
| if demand: | |
| st.bar_chart(demand, height=180) | |
| else: | |
| st.info("No demand data yet") | |
| st.markdown('</div>', unsafe_allow_html=True) | |
| with c3: | |
| st.markdown('<div class="chart-container">', unsafe_allow_html=True) | |
| st.caption("🏆 Cumulative Reward") | |
| if rewards_list: | |
| cum_rewards = [] | |
| running = 0 | |
| for r in rewards_list: | |
| running += r | |
| cum_rewards.append(running) | |
| st.area_chart(cum_rewards, height=180) | |
| else: | |
| st.info("No rewards yet") | |
| st.markdown('</div>', unsafe_allow_html=True) | |
| last_reward = reward | |
| step_num += 1 | |
| time.sleep(1.0) | |
| # ── CLEANUP ── | |
| try: | |
| env.close() | |
| except Exception: | |
| pass | |
| # ── FINAL RESULTS ── | |
| score = float(getattr(obs, "cumulative_reward", sum(rewards_list) if rewards_list else 0.0)) | |
| score = min(max(score, 0.0), 1.0) | |
| success = score >= 0.01 | |
| with result_ph.container(): | |
| cls = "success" if success else "fail" | |
| color = "#00E09E" if success else "#FF4B6E" | |
| icon = "🎉" if success else "😞" | |
| label = "SUCCESS" if success else "FAILED" | |
| st.markdown(f""" | |
| <div class="results-card {cls}" style="margin-top:2rem;"> | |
| <div style="font-size:2rem;">{icon}</div> | |
| <div style="color:{color};font-weight:700;font-size:0.9rem;letter-spacing:2px;margin:8px 0;">{label}</div> | |
| <div class="results-score" style="color:{color};">{score:.4f}</div> | |
| <div style="color:var(--text-muted);font-size:0.85rem;margin-top:8px;"> | |
| Steps: <b>{step_num - 1}</b> | | |
| Task: <b>{task_type}</b> | | |
| Model: <b>{model_name.split('/')[-1]}</b> | |
| </div> | |
| </div> | |
| """, unsafe_allow_html=True) | |
| if __name__ == "__main__": | |
| main() | |