| import pandas as pd
|
| import numpy as np
|
| import gradio as gr
|
| import random
|
|
|
|
|
| def predict_single(event_time, product_id, category_id, category_code, brand, price, user_id, user_session):
|
|
|
|
|
| probability = random.randint(40, 60)
|
| label = "purchase" if probability > 50 else "not purchase"
|
|
|
|
|
|
|
| if probability >= 50:
|
| main_color = "#00ff88"
|
| glow_color = "rgba(0, 255, 136, 0.5)"
|
| gradient_start = "#c75acd"
|
| gradient_end = "#c469b8"
|
| else:
|
| main_color = "#ff4b2b"
|
| glow_color = "rgba(255, 75, 43, 0.5)"
|
| gradient_start = "#ff4b2b"
|
| gradient_end = "#ff416c"
|
|
|
| html_result = f"""
|
| <div style="
|
| display: flex;
|
| align-items: center;
|
| justify-content: space-around;
|
| padding: 30px;
|
| background: #111827;
|
| border-radius: 20px;
|
| border: 2px solid {main_color};
|
| box-shadow: 0 0 25px {glow_color};
|
| max-width: 550px;
|
| margin: 20px auto;
|
| transition: all 0.5s ease;
|
| ">
|
| <div style="position: relative; width: 130px; height: 130px; filter: drop-shadow(0 0 8px {glow_color});">
|
| <svg viewBox="0 0 36 36" style="transform: rotate(-90deg); width: 100%; height: 100%;">
|
| <defs>
|
| <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
| <stop offset="0%" style="stop-color:{gradient_start};stop-opacity:1" />
|
| <stop offset="100%" style="stop-color:{gradient_end};stop-opacity:1" />
|
| </linearGradient>
|
| </defs>
|
| <circle cx="18" cy="18" r="15.9155" fill="none" stroke="#2d3748" stroke-width="3" />
|
| <circle cx="18" cy="18" r="15.9155" fill="none"
|
| stroke="url(#grad1)"
|
| stroke-width="3.5"
|
| stroke-dasharray="{probability}, 100"
|
| stroke-linecap="round"
|
| style="transition: stroke-dasharray 1s ease-in-out;" />
|
| </svg>
|
| <div style="
|
| position: absolute;
|
| top: 50%;
|
| left: 50%;
|
| transform: translate(-50%, -50%);
|
| color: white;
|
| font-family: 'Inter', sans-serif;
|
| font-size: 22px;
|
| font-weight: 800;
|
| text-shadow: 0 0 10px rgba(255,255,255,0.3);
|
| ">
|
| {probability}%
|
| </div>
|
| </div>
|
|
|
| <div style="text-align: left; font-family: 'Inter', -apple-system, sans-serif;">
|
| <p style="color: #94a3b8; margin: 0; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 2.5px;">
|
| Predict results
|
| </p>
|
| <h2 style="
|
| color: white;
|
| margin: 8px 0 0 0;
|
| font-size: 38px;
|
| font-weight: 900;
|
| letter-spacing: -1px;
|
| background: linear-gradient(to right, white, {main_color});
|
| -webkit-background-clip: text;
|
| -webkit-text-fill-color: transparent;
|
| ">
|
| {label}
|
| </h2>
|
| </div>
|
| </div>
|
| """
|
| return html_result
|
|
|
