# Jay's Mobile Wash - Mock UI Preview (Visual Only - No Backend) # Current Date import gradio as gr import json import random from datetime import datetime, timedelta class MockUIPreview: """Mock UI preview that looks exactly like the real system""" def __init__(self): """Initialize mock UI with fake data""" # Mock business data (your real info for display) self.business_info = { 'name': "Jay's Mobile Wash", 'phone': '562-228-9429', 'twilio_phone': '+18557059842', 'email': 'jay@jaysmobilewash.com', 'website': 'jaysmobilewash.com', 'instagram': '@jayswaxandwash', 'service_area': 'Los Angeles, Orange County, and the IE', 'hours': '6 AM to 5 PM PST daily', 'owner': 'jjmandog' } # Mock system status self.system_powered_on = True self.system_uptime = "2h 15m" # Mock analytics data self.mock_analytics = { 'sms_total': 142, 'calls_total': 38, 'training_sessions': 25, 'performance_score': 87, 'response_rate': 94.2, 'avg_call_duration': 125 } def create_mock_ui(self): """Create the complete mock UI""" with gr.Blocks( title="🚗⚡ Jay's Mobile Wash - COMPLETE AI System", theme=gr.themes.Soft(), css=""" .main-header { background: linear-gradient(135deg, #1e3a8a, #3b82f6); } .power-control { background: linear-gradient(135deg, #059669, #10b981); } .feature-card { background: white; border-left: 6px solid #3b82f6; } .status-good { background: #d1fae5; border-color: #10b981; } .status-warning { background: #fef3c7; border-color: #f59e0b; } """ ) as mock_app: # MAIN HEADER (Exact replica) gr.HTML(f""" <div class="main-header" style="color: white; padding: 3rem; border-radius: 25px; text-align: center; margin-bottom: 2rem;"> <h1 style="margin: 0; font-size: 3rem;">🚗⚡ {self.business_info['name']}</h1> <h2 style="margin: 1rem 0; font-size: 1.8rem; opacity: 0.9;">COMPLETE AI Training & Management System</h2> <p style="margin: 1rem 0; font-size: 1.2rem;">🔥 ALL FEATURES IMPLEMENTED • Real Backend • Live Operations • Zero GPU</p> <div style="display: flex; justify-content: center; gap: 2rem; margin-top: 2rem; flex-wrap: wrap;"> <div style="background: rgba(255,255,255,0.15); padding: 1rem; border-radius: 10px;"> <strong>👤 Owner: {self.business_info['owner']}</strong> </div> <div style="background: rgba(255,255,255,0.15); padding: 1rem; border-radius: 10px;"> <strong>📞 Business: {self.business_info['phone']}</strong> </div> <div style="background: rgba(255,255,255,0.15); padding: 1rem; border-radius: 10px;"> <strong>🤖 AI Phone: {self.business_info['twilio_phone']}</strong> </div> <div style="background: rgba(255,255,255,0.15); padding: 1rem; border-radius: 10px;"> <strong>🌍 Service: {self.business_info['service_area']}</strong> </div> <div style="background: {'#10b981' if self.system_powered_on else '#ef4444'}; padding: 1rem; border-radius: 10px;"> <strong>{'🟢 AI LIVE' if self.system_powered_on else '🔴 AI OFF'}</strong> </div> </div> <div style="background: rgba(255,255,255,0.1); padding: 1rem; border-radius: 15px; margin-top: 2rem;"> <small>🤗 Hugging Face Space: huggingface.co/spaces/jjmandog/jayscallcenter | Date: 2025-06-13 08:32:47 | COMPLETE IMPLEMENTATION</small> </div> </div> """) # SYSTEM STATUS OVERVIEW (Exact replica) gr.HTML(f""" <div style="background: #f0f9ff; border: 2px solid #3b82f6; border-radius: 15px; padding: 2rem; margin: 2rem 0;"> <h3 style="color: #1e3a8a; margin: 0 0 1rem 0;">🎯 COMPLETE System Status</h3> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;"> <div style="background: white; padding: 1rem; border-radius: 10px; text-align: center; border-left: 4px solid #10b981;"> <div style="font-size: 2rem;">📞</div> <strong>Twilio Integration</strong><br> <small>🟢 Connected</small> </div> <div style="background: white; padding: 1rem; border-radius: 10px; text-align: center; border-left: 4px solid #10b981;"> <div style="font-size: 2rem;">🎤</div> <strong>Voice Processing</strong><br> <small>🟢 Ready</small> </div> <div style="background: white; padding: 1rem; border-radius: 10px; text-align: center; border-left: 4px solid #10b981;"> <div style="font-size: 2rem;">🎓</div> <strong>AI Training</strong><br> <small>🟢 4 Methods Ready</small> </div> <div style="background: white; padding: 1rem; border-radius: 10px; text-align: center; border-left: 4px solid #10b981;"> <div style="font-size: 2rem;">📊</div> <strong>Analytics</strong><br> <small>🟢 Live Dashboard</small> </div> <div style="background: white; padding: 1rem; border-radius: 10px; text-align: center; border-left: 4px solid #10b981;"> <div style="font-size: 2rem;">⚙️</div> <strong>Backend Control</strong><br> <small>🟢 Full Access</small> </div> <div style="background: white; padding: 1rem; border-radius: 10px; text-align: center; border-left: 4px solid #10b981;"> <div style="font-size: 2rem;">🌐</div> <strong>Webhooks</strong><br> <small>🟢 Live Integration</small> </div> </div> <div style="background: rgba(59, 130, 246, 0.1); padding: 1rem; border-radius: 10px; margin-top: 1rem; text-align: center;"> <strong style="color: #1e3a8a;"> System Uptime: {self.system_uptime} | Components: 6/6 Active | Zero GPU: Enabled </strong> </div> </div> """) # MASTER POWER CONTROL (Exact replica) gr.HTML(""" <div class="power-control" style="color: white; padding: 2rem; border-radius: 20px; text-align: center; margin: 2rem 0;"> <h2 style="margin: 0 0 1rem 0;">🔴🟢 Master AI System Power</h2> <p style="margin: 0; opacity: 0.9;">Control your complete AI system with live SMS, Voice, Training, and Analytics</p> </div> """) # Power toggle power_toggle = gr.Checkbox( label="🔴🟢 COMPLETE AI System Power (SMS Bots, Voice Bots, Training, Analytics, Backend)", value=self.system_powered_on, info="Red = All AI Off | Green = Complete System Live • Includes SMS, Voice, Training, Analytics" ) power_status_display = gr.HTML() # MAIN SYSTEM INTERFACE TABS with gr.Tabs(): # 🎯 SYSTEM OVERVIEW TAB with gr.Tab("🎯 System Overview"): gr.HTML(f""" <div class="feature-card" style="padding: 2rem; border-radius: 15px; margin: 1rem 0;"> <h3 style="color: #1e3a8a; margin: 0 0 1rem 0;">🎯 Complete System Overview</h3> <p>Your complete AI system for {self.business_info['name']} is now fully implemented and ready for live operation.</p> <h4 style="color: #374151; margin: 1.5rem 0 1rem 0;">🔥 Implemented Features:</h4> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem;"> <div style="background: #f8fafc; padding: 1rem; border-radius: 8px; border-left: 4px solid #dc2626;"> <strong>📱 Live SMS Bot</strong><br> <small>Real Twilio integration on {self.business_info['twilio_phone']}</small><br> <small>Responds to customer texts with your business knowledge</small> </div> <div style="background: #f8fafc; padding: 1rem; border-radius: 8px; border-left: 4px solid #ea580c;"> <strong>📞 Live Voice Bot</strong><br> <small>AI answers calls, forwards to {self.business_info['phone']}</small><br> <small>Voice recognition & text-to-speech enabled</small> </div> <div style="background: #f8fafc; padding: 1rem; border-radius: 8px; border-left: 4px solid #059669;"> <strong>🎓 4 AI Training Methods</strong><br> <small>Customer Simulation, AI Questioning, Conversation Practice, Voice Training</small><br> <small>Zero GPU acceleration for fast training</small> </div> <div style="background: #f8fafc; padding: 1rem; border-radius: 8px; border-left: 4px solid #0891b2;"> <strong>📊 Real Analytics Dashboard</strong><br> <small>Live SMS/Call analytics, training progress</small><br> <small>Business intelligence and performance monitoring</small> </div> <div style="background: #f8fafc; padding: 1rem; border-radius: 8px; border-left: 4px solid #7c3aed;"> <strong>⚙️ Complete Backend Control</strong><br> <small>Real settings control, pricing updates, business info</small><br> <small>Twilio configuration, system management</small> </div> <div style="background: #f8fafc; padding: 1rem; border-radius: 8px; border-left: 4px solid #1e3a8a;"> <strong>🌐 Live Integration</strong><br> <small>Webhook server, real-time responses, database logging</small><br> <small>Security, monitoring, performance tracking</small> </div> </div> <div style="background: #10b981; color: white; padding: 1.5rem; border-radius: 10px; margin-top: 2rem; text-align: center;"> <h4 style="margin: 0 0 1rem 0;">✅ Your AI System is COMPLETE and Ready!</h4> <p style="margin: 0;">All features implemented, tested, and configured with your real business information.</p> </div> </div> """) # 🎓 AI TRAINING TAB with gr.Tab("🎓 AI Training"): self._create_training_interface() # 📊 ANALYTICS TAB with gr.Tab("📊 Analytics"): self._create_analytics_interface() # ⚙️ SETTINGS TAB with gr.Tab("⚙️ Settings"): self._create_settings_interface() # 🔧 SYSTEM STATUS TAB with gr.Tab("🔧 System Status"): self._create_system_status_interface() # MOCK FUNCTIONS FOR INTERACTIVITY def mock_power_toggle(power_state): """Mock power toggle response""" if power_state: return f""" <div style="background: #10b981; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">🟢 COMPLETE AI SYSTEM IS LIVE!</h3> <p style="margin: 0 0 1rem 0;">Complete AI system powered on successfully!</p> <div style="background: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; margin-top: 1rem;"> <strong>🔥 Active Features:</strong><br> • 📱 Live SMS Bot on {self.business_info['twilio_phone']}<br> • 📞 Live Voice Bot with forwarding to {self.business_info['phone']}<br> • 🤖 AI Conversation Engine with your business knowledge<br> • 🎤 Voice Recognition & Text-to-Speech<br> • 🎓 4 AI Training Methods<br> • 📊 Real-time Analytics Dashboard<br> • ⚙️ Complete Backend Settings Control<br> • 🌐 Live Webhook Integration </div> <div style="background: rgba(255,255,255,0.1); padding: 1rem; border-radius: 10px; margin-top: 1rem;"> <strong>🏢 Your Business:</strong> {self.business_info['name']}<br> <strong>📞 Business Phone:</strong> {self.business_info['phone']}<br> <strong>🤖 AI Phone:</strong> {self.business_info['twilio_phone']}<br> <strong>🌍 Service Area:</strong> {self.business_info['service_area']} </div> </div> """ else: return f""" <div style="background: #ef4444; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">🔴 COMPLETE AI SYSTEM POWERED OFF</h3> <p style="margin: 0 0 1rem 0;">Complete AI system powered off (monitoring continues)</p> <p style="margin: 0;"><strong>Note:</strong> Webhook server and system monitoring continue running</p> </div> """ # Connect power toggle power_toggle.change( fn=mock_power_toggle, inputs=[power_toggle], outputs=[power_status_display] ) # FOOTER (Exact replica) gr.HTML(f""" <div style="text-align: center; padding: 3rem; margin-top: 4rem; border-top: 2px solid #e5e7eb; color: #6b7280;"> <h3 style="color: #1e3a8a;">🚗⚡ {self.business_info['name']} - COMPLETE AI System</h3> <p><strong>🔥 ALL FEATURES IMPLEMENTED • Real Backend Control • Live Operations • Zero GPU Powered</strong></p> <div style="display: flex; justify-content: center; gap: 2rem; margin: 1rem 0; flex-wrap: wrap;"> <span>👤 Owner: {self.business_info['owner']}</span> <span>📞 Business: {self.business_info['phone']}</span> <span>🤖 AI: {self.business_info['twilio_phone']}</span> <span>🌍 {self.business_info['service_area']}</span> <span>🤗 HF Spaces</span> </div> <p><small>🚀 Complete Implementation Date: 2025-06-13 08:32:47 | All Features Active</small></p> <p><small>Features: Live SMS/Voice Bots • 4 Training Methods • Real Analytics • Backend Control • Webhook Integration • Voice Processing • Database Logging</small></p> </div> """) return mock_app def _create_training_interface(self): """Create mock training interface""" # Training system header gr.HTML(f""" <div style="background: linear-gradient(135deg, #7c3aed, #a855f7); color: white; padding: 3rem; border-radius: 25px; text-align: center; margin-bottom: 2rem;"> <h1 style="margin: 0; font-size: 3rem;">🎓 Complete AI Training System</h1> <h2 style="margin: 1rem 0; font-size: 1.8rem; opacity: 0.9;">{self.business_info['name']} - Professional Training</h2> <p style="margin: 1rem 0; font-size: 1.2rem;">4 Training Methods • Zero GPU Acceleration • Real Business Knowledge</p> </div> """) with gr.Tabs(): # Customer Simulation Training with gr.Tab("🎭 Customer Simulation"): gr.HTML(""" <div style="background: #fef3c7; border: 2px solid #f59e0b; border-radius: 15px; padding: 2rem; margin: 2rem 0;"> <h3 style="color: #92400e; margin: 0 0 1rem 0;">🎭 Customer Simulation Training</h3> <p style="color: #92400e; margin: 0 0 1rem 0;"> <strong>How it works:</strong> You act like different types of customers, and the AI learns how Jay would respond. </p> <p style="color: #92400e; margin: 0;"> <strong>Difficulty:</strong> Beginner | <strong>Time:</strong> 15-30 minutes | <strong>Goal:</strong> Teach natural customer responses </p> </div> """) simulation_scenario = gr.Dropdown( choices=["Price Shopping Customer", "Urgent Booking Customer", "Quality-Focused Customer", "First-Time Customer"], label="📋 Choose Customer Scenario", value="Price Shopping Customer" ) customer_message = gr.Textbox( label="💬 Your Customer Message (Act like the customer)", placeholder="Example: Hi, how much do you charge for a car wash?", lines=3 ) generate_response_btn = gr.Button("🤖 Generate AI Response", variant="primary") ai_response_output = gr.Textbox( label="🤖 AI Response (What the AI would say to this customer)", value="Hi! Thanks for reaching out to Jay's Mobile Wash! For a basic car wash, we charge $60 for cars and $70 for SUVs. This includes exterior wash, dry, and basic interior cleaning. Would you like to hear about our other packages?", interactive=False, lines=4 ) your_feedback = gr.Textbox( label="✍️ Your Expert Feedback (How should Jay actually respond?)", placeholder="Example: The AI should also mention our premium wax service and ask about their location...", lines=4 ) response_rating = gr.Slider( minimum=1, maximum=10, value=8, step=1, label="⭐ Rate AI Response (1=Poor, 10=Perfect)" ) save_simulation_btn = gr.Button("💾 Save Training Data", variant="secondary") def mock_generate_ai_response(customer_msg, scenario): responses = [ f"Hi! Thanks for contacting Jay's Mobile Wash! For {scenario.lower()}, I'd recommend our premium package at $130 for cars. This includes complete wash, wax, and interior detail. What type of vehicle do you have?", f"Hello! I'm Jay's AI assistant. Based on your message about {customer_msg[:30]}..., I can help you with pricing and scheduling. Our service area covers {self.business_info['service_area']}. When would you like service?", f"Hi there! Thanks for reaching out to {self.business_info['name']}! I can see you're interested in {scenario.lower()}. Our hours are {self.business_info['hours']}. How can I help you today?" ] return random.choice(responses) def mock_save_training(): return """ <div style="background: #10b981; color: white; padding: 1.5rem; border-radius: 10px; text-align: center;"> <h4 style="margin: 0 0 1rem 0;">✅ Training Data Saved Successfully!</h4> <p style="margin: 0;">Your feedback will help improve AI responses for similar customer interactions.</p> </div> """ generate_response_btn.click( fn=mock_generate_ai_response, inputs=[customer_message, simulation_scenario], outputs=[ai_response_output] ) save_simulation_btn.click( fn=mock_save_training, outputs=[gr.HTML()] ) # AI Questioning Training with gr.Tab("🤖 AI Questioning"): gr.HTML(""" <div style="background: #e0f2fe; border: 2px solid #0891b2; border-radius: 15px; padding: 2rem; margin: 2rem 0;"> <h3 style="color: #164e63; margin: 0 0 1rem 0;">🤖 AI Questioning Session</h3> <p style="color: #164e63; margin: 0 0 1rem 0;"> <strong>How it works:</strong> The AI asks you business questions, and learns from your expert answers. </p> <p style="color: #164e63; margin: 0;"> <strong>Difficulty:</strong> Intermediate | <strong>Time:</strong> 20-40 minutes | <strong>Goal:</strong> Extract business expertise </p> </div> """) questioning_topic = gr.Dropdown( choices=["Service Differentiation", "Customer Service Excellence", "Booking and Scheduling", "Technical Knowledge"], label="📚 Choose Learning Topic", value="Service Differentiation" ) start_questioning_btn = gr.Button("🎯 Start AI Questioning Session", variant="primary") ai_question = gr.HTML(""" <div style="background: #0891b2; color: white; padding: 2rem; border-radius: 15px; margin: 1rem 0;"> <h4 style="margin: 0 0 1rem 0;">🤖 AI Question 1 of 5</h4> <p style="margin: 0; font-size: 1.2rem;">What makes Jay's Mobile Wash different from your competitors?</p> </div> """) expert_answer = gr.Textbox( label="🧠 Your Expert Answer (Share your business knowledge)", placeholder="Share your professional experience and knowledge...", lines=5 ) next_question_btn = gr.Button("➡️ Next Question", variant="secondary") def mock_next_question(): questions = [ "How do you handle difficult or unhappy customers?", "What's your process when a customer isn't satisfied?", "What information do you need to provide an accurate quote?", "How do you handle different paint types or vehicle conditions?" ] return f""" <div style="background: #0891b2; color: white; padding: 2rem; border-radius: 15px; margin: 1rem 0;"> <h4 style="margin: 0 0 1rem 0;">🤖 AI Question {random.randint(2,5)} of 5</h4> <p style="margin: 0; font-size: 1.2rem;">{random.choice(questions)}</p> </div> """ next_question_btn.click( fn=mock_next_question, outputs=[ai_question] ) # Conversation Practice with gr.Tab("💬 Conversation Practice"): gr.HTML(""" <div style="background: #f0fdf4; border: 2px solid #059669; border-radius: 15px; padding: 2rem; margin: 2rem 0;"> <h3 style="color: #065f46; margin: 0 0 1rem 0;">💬 Conversation Practice</h3> <p style="color: #065f46; margin: 0 0 1rem 0;"> <strong>How it works:</strong> Practice realistic customer conversations with back-and-forth dialogue. </p> <p style="color: #065f46; margin: 0;"> <strong>Difficulty:</strong> Advanced | <strong>Time:</strong> 30-45 minutes | <strong>Goal:</strong> Master conversation flow </p> </div> """) conversation_type = gr.Dropdown( choices=["Phone Call Simulation", "SMS Conversation Chain", "Objection Handling Practice"], label="📞 Choose Conversation Type", value="Phone Call Simulation" ) start_conversation_btn = gr.Button("💬 Start Conversation Practice", variant="primary") conversation_history = gr.HTML(""" <div style="background: white; border-radius: 15px; padding: 1rem; margin: 1rem 0; max-height: 400px; overflow-y: auto;"> <h4 style="color: #059669; margin: 0 0 1rem 0;">💬 Conversation Practice</h4> <div style="background: #f0f9ff; padding: 1rem; border-radius: 10px; margin: 0.5rem 0; border-left: 4px solid #0891b2;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;"> <strong style="color: #0891b2;">Customer</strong> <small style="color: #6b7280;">14:32</small> </div> <p style="margin: 0; color: #374151;">Hi, I'm interested in getting my car detailed. Can you tell me about your services?</p> </div> <div style="background: #f0fdf4; padding: 1rem; border-radius: 10px; margin: 0.5rem 0; border-left: 4px solid #059669;"> <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;"> <strong style="color: #059669;">Jay (You)</strong> <small style="color: #6b7280;">14:33</small> </div> <p style="margin: 0; color: #374151;">Hi! Thanks for reaching out to Jay's Mobile Wash! We offer three main packages...</p> </div> </div> """) your_message = gr.Textbox( label="💬 Your Message (Continue the conversation)", placeholder="Type your response as Jay...", lines=3 ) send_message_btn = gr.Button("📤 Send Message", variant="secondary") # Voice Scenario Training with gr.Tab("🎤 Voice Scenario Training"): gr.HTML(""" <div style="background: #fdf2f8; border: 2px solid #ec4899; border-radius: 15px; padding: 2rem; margin: 2rem 0;"> <h3 style="color: #831843; margin: 0 0 1rem 0;">🎤 Voice Scenario Training</h3> <p style="color: #831843; margin: 0 0 1rem 0;"> <strong>How it works:</strong> Train with real voice input using microphone and Zero GPU processing. </p> <p style="color: #831843; margin: 0;"> <strong>Difficulty:</strong> Expert | <strong>Time:</strong> 20-45 minutes | <strong>Equipment:</strong> Microphone required </p> </div> """) voice_scenario = gr.Dropdown( choices=["Phone Call Handling", "Difficult Customer", "Technical Questions", "Booking Process"], label="🎤 Choose Voice Scenario", value="Phone Call Handling" ) audio_input = gr.Audio( label="🎤 Record Your Voice (Practice scenario)", type="numpy" ) process_voice_btn = gr.Button("🔄 Process Voice Input", variant="primary") voice_analysis = gr.HTML(""" <div style="background: #f8fafc; padding: 1rem; border-radius: 10px; margin: 1rem 0;"> <h4 style="color: #374151;">🎤 Voice Analysis Results</h4> <p><strong>Transcription:</strong> "Hi, thank you for calling Jay's Mobile Wash, how can I help you today?"</p> <p><strong>Confidence:</strong> 94.2%</p> <p><strong>Speaking Speed:</strong> Natural (145 WPM)</p> <p><strong>Tone Analysis:</strong> Professional, Friendly</p> </div> """) ai_voice_response = gr.Audio( label="🔊 AI Voice Response", value=None ) def _create_analytics_interface(self): """Create mock analytics interface""" # Analytics header gr.HTML(f""" <div style="background: linear-gradient(135deg, #ea580c, #f97316); color: white; padding: 3rem; border-radius: 25px; text-align: center; margin-bottom: 2rem;"> <h1 style="margin: 0; font-size: 3rem;">📊 Analytics Dashboard</h1> <h2 style="margin: 1rem 0; font-size: 1.8rem; opacity: 0.9;">{self.business_info['name']} - Performance Intelligence</h2> <p style="margin: 1rem 0; font-size: 1.2rem;">Live Data • Performance Metrics • AI Training Analytics</p> </div> """) # Refresh controls with gr.Row(): refresh_btn = gr.Button("🔄 Refresh All Data", variant="primary") last_updated = gr.HTML(f""" <div style="background: #10b981; color: white; padding: 1rem; border-radius: 10px; text-align: center;"> <strong>📊 Data refreshed at {datetime.now().strftime('%H:%M:%S')} PST</strong> </div> """) with gr.Tabs(): # System Overview with gr.Tab("🎯 System Overview"): with gr.Row(): with gr.Column(scale=1): gr.HTML(f""" <div style="background: #10b981; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">🎯 System Performance Score</h3> <div style="font-size: 3rem; font-weight: bold; margin: 1rem 0;">{self.mock_analytics['performance_score']}%</div> <p style="margin: 0; opacity: 0.9;">SMS, Calls & AI Training performance</p> </div> """) with gr.Column(scale=1): gr.HTML(""" <div style="background: #10b981; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">🔋 System Health</h3> <div style="font-size: 3rem; margin: 1rem 0;">💚</div> <p style="margin: 0; opacity: 0.9; text-transform: capitalize;">Healthy</p> </div> """) with gr.Row(): gr.HTML(f""" <div style="background: #3b82f6; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">📊 Total Interactions (30 days)</h3> <div style="font-size: 3rem; font-weight: bold; margin: 1rem 0;">{self.mock_analytics['sms_total'] + self.mock_analytics['calls_total']}</div> <div style="display: flex; justify-content: space-around; margin-top: 1rem;"> <div>📱 SMS: {self.mock_analytics['sms_total']}</div> <div>📞 Calls: {self.mock_analytics['calls_total']}</div> </div> </div> """) gr.HTML(f""" <div style="background: #7c3aed; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">⚡ Live System Status</h3> <div style="font-size: 2rem; font-weight: bold; margin: 1rem 0;">12</div> <p style="margin: 0.5rem 0;">Interactions in last 24 hours</p> <small style="opacity: 0.8;">Last activity: 2025-06-13 08:25:32</small> </div> """) # SMS Analytics with gr.Tab("📱 SMS Analytics"): with gr.Row(): gr.HTML(f""" <div style="background: #059669; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">📱 SMS Volume (30 days)</h3> <div style="font-size: 3rem; font-weight: bold; margin: 1rem 0;">{self.mock_analytics['sms_total']}</div> <p style="margin: 0; opacity: 0.9;">Total SMS interactions</p> </div> """) gr.HTML(f""" <div style="background: #0891b2; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">📈 Response Rate</h3> <div style="font-size: 3rem; font-weight: bold; margin: 1rem 0;">{self.mock_analytics['response_rate']}%</div> <p style="margin: 0; opacity: 0.9;">Customer response rate</p> </div> """) gr.HTML(""" <div style="background: white; padding: 2rem; border-radius: 15px; margin: 1rem 0; border: 2px solid #e5e7eb;"> <h4 style="color: #374151; margin: 0 0 1rem 0;">📊 Top Customer Keywords (Last 7 days)</h4> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;"> <div style="background: #f0f9ff; padding: 1rem; border-radius: 8px;"> <strong>price</strong> - 34 mentions </div> <div style="background: #f0f9ff; padding: 1rem; border-radius: 8px;"> <strong>schedule</strong> - 28 mentions </div> <div style="background: #f0f9ff; padding: 1rem; border-radius: 8px;"> <strong>wash</strong> - 45 mentions </div> <div style="background: #f0f9ff; padding: 1rem; border-radius: 8px;"> <strong>detail</strong> - 19 mentions </div> </div> </div> """) # Call Analytics with gr.Tab("📞 Call Analytics"): with gr.Row(): gr.HTML(f""" <div style="background: #dc2626; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">📞 Call Volume (30 days)</h3> <div style="font-size: 3rem; font-weight: bold; margin: 1rem 0;">{self.mock_analytics['calls_total']}</div> <p style="margin: 0; opacity: 0.9;">Total call interactions</p> </div> """) gr.HTML(f""" <div style="background: #ea580c; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">⏱️ Avg Duration</h3> <div style="font-size: 3rem; font-weight: bold; margin: 1rem 0;">{self.mock_analytics['avg_call_duration']}s</div> <p style="margin: 0; opacity: 0.9;">Average call length</p> </div> """) gr.HTML(""" <div style="background: white; padding: 2rem; border-radius: 15px; margin: 1rem 0; border: 2px solid #e5e7eb;"> <h4 style="color: #374151; margin: 0 0 1rem 0;">📊 Call Outcomes (Last 30 days)</h4> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;"> <div style="background: #d1fae5; padding: 1rem; border-radius: 8px; border-left: 4px solid #10b981;"> <strong>Completed</strong><br> <span style="font-size: 1.5rem;">28 calls</span> </div> <div style="background: #fef3c7; padding: 1rem; border-radius: 8px; border-left: 4px solid #f59e0b;"> <strong>Transferred</strong><br> <span style="font-size: 1.5rem;">8 calls</span> </div> <div style="background: #fee2e2; padding: 1rem; border-radius: 8px; border-left: 4px solid #ef4444;"> <strong>No Answer</strong><br> <span style="font-size: 1.5rem;">2 calls</span> </div> </div> </div> """) # AI Training Analytics with gr.Tab("🎓 AI Training Analytics"): gr.HTML(""" <div style="background: #fef3c7; border: 2px solid #f59e0b; border-radius: 15px; padding: 2rem; margin: 2rem 0;"> <h3 style="color: #92400e; margin: 0 0 1rem 0;">🧠 AI Training Intelligence</h3> <p style="color: #92400e; margin: 0 0 1rem 0;"> <strong>Training Purpose:</strong> These sessions teach your SMS and Voice bots how to respond like YOU would. </p> <p style="color: #92400e; margin: 0;"> Each training method improves bot intelligence, conversation skills, and business knowledge. </p> </div> """) with gr.Row(): gr.HTML(f""" <div style="background: #7c3aed; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">🎓 Training Sessions</h3> <div style="font-size: 3rem; font-weight: bold; margin: 1rem 0;">{self.mock_analytics['training_sessions']}</div> <p style="margin: 0; opacity: 0.9;">Total sessions completed</p> </div> """) gr.HTML(""" <div style="background: #0891b2; color: white; padding: 2rem; border-radius: 15px; text-align: center;"> <h3 style="margin: 0 0 1rem 0;">⭐ Training Quality</h3> <div style="font-size: 3rem; font-weight: bold; margin: 1rem 0;">8.4/10</div> <p style="margin: 0; opacity: 0.9;">Average quality rating</p> </div> """) gr.HTML(""" <div style="background: white; padding: 2rem; border-radius: 15px; margin: 1rem 0; border: 2px solid #e5e7eb;"> <h4 style="color: #374151; margin: 0 0 1rem 0;">📊 Training Methods Performance</h4> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;"> <div style="background: #fef3c7; padding: 1rem; border-radius: 8px; border-left: 4px solid #f59e0b;"> <strong>🎭 Customer Simulation</strong><br> <span>8 sessions • 8.7/10 rating</span> </div> <div style="background: #e0f2fe; padding: 1rem; border-radius: 8px; border-left: 4px solid #0891b2;"> <strong>🤖 AI Questioning</strong><br> <span>6 sessions • 8.2/10 rating</span> </div> <div style="background: #f0fdf4; padding: 1rem; border-radius: 8px; border-left: 4px solid #059669;"> <strong>💬 Conversation Practice</strong><br> <span>7 sessions • 8.5/10 rating</span> </div> <div style="background: #fdf2f8; padding: 1rem; border-radius: 8px; border-left: 4px solid #ec4899;"> <strong>🎤 Voice Training</strong><br> <span>4 sessions • 8.1/10 rating</span> </div> </div> </div> """) def mock_refresh(): return f""" <div style="background: #10b981; color: white; padding: 1rem; border-radius: 10px; text-align: center;"> <strong>📊 Data refreshed at {datetime.now().strftime('%H:%M:%S')} PST</strong> </div> """ refresh_btn.click(fn=mock_refresh, outputs=[last_updated]) def _create_settings_interface(self): """Create mock settings interface""" # Settings header gr.HTML(f""" <div style="background: linear-gradient(135deg, #059669, #10b981); color: white; padding: 3rem; border-radius: 25px; text-align: center; margin-bottom: 2rem;"> <h1 style="margin: 0; font-size: 3rem;">⚙️ Complete Settings & Backend Control</h1> <h2 style="margin: 1rem 0; font-size: 1.8rem; opacity: 0.9;">Real System Configuration • Live Control • Backend Access</h2> <p style="margin: 1rem 0; font-size: 1.2rem;">Configure your AI system with real backend control and live updates</p> </div> """) with gr.Tabs(): # Business Information with gr.Tab("🏢 Business Information"): gr.HTML(""" <div style="background: #f0fdf4; border: 2px solid #059669; border-radius: 15px; padding: 2rem; margin: 2rem 0;"> <h3 style="color: #065f46; margin: 0 0 1rem 0;">🏢 Business Information Settings</h3> <p style="color: #065f46; margin: 0;"> Update your business details that customers see in AI responses. Changes are applied immediately to live system. </p> </div> """) with gr.Row(): with gr.Column(scale=1): business_name = gr.Textbox( label="🏢 Business Name", value=self.business_info['name'], placeholder="Your business name" ) business_phone = gr.Textbox( label="📞 Business Phone (Your personal number)", value=self.business_info['phone'], placeholder="562-228-9429" ) business_email = gr.Textbox( label="📧 Business Email", value=self.business_info['email'], placeholder="your@email.com" ) with gr.Column(scale=1): business_website = gr.Textbox( label="🌐 Website", value=self.business_info['website'], placeholder="yourwebsite.com" ) business_instagram = gr.Textbox( label="📱 Instagram Handle", value=self.business_info['instagram'], placeholder="@yourbusiness" ) service_area = gr.Textbox( label="🌍 Service Area", value=self.business_info['service_area'], placeholder="Your service area" ) save_business_btn = gr.Button("💾 Save Business Information", variant="primary") def mock_save_business(): return """ <div style="background: #10b981; color: white; padding: 1.5rem; border-radius: 10px; text-align: center;"> <h4 style="margin: 0 0 1rem 0;">✅ Business Information Saved!</h4> <p style="margin: 0;">AI responses will now use your updated business information.</p> </div> """ save_business_btn.click(fn=mock_save_business, outputs=[gr.HTML()]) # Service Packages & Pricing with gr.Tab("💰 Service Packages & Pricing"): gr.HTML(""" <div style="background: #fff7ed; border: 2px solid #ea580c; border-radius: 15px; padding: 2rem; margin: 2rem 0;"> <h3 style="color: #9a3412; margin: 0 0 1rem 0;">💰 Service Packages & Pricing</h3> <p style="color: #9a3412; margin: 0;"> Configure your service packages and pricing. AI will quote these exact prices to customers. Updates are applied immediately to live responses. </p> </div> """) # Basic Package gr.HTML("<h4 style='color: #ea580c; margin: 2rem 0 1rem 0;'>🚗 Basic Package</h4>") with gr.Row(): basic_car_price = gr.Number( label="💰 Car Price ($)", value=60, minimum=0 ) basic_suv_price = gr.Number( label="💰 SUV/Truck Price ($)", value=70, minimum=0 ) basic_description = gr.Textbox( label="📝 Basic Package Description", value="Exterior wash, dry, basic interior clean, tire shine", lines=2 ) # Premium Package gr.HTML("<h4 style='color: #ea580c; margin: 2rem 0 1rem 0;'>✨ Premium Package</h4>") with gr.Row(): premium_car_price = gr.Number( label="💰 Car Price ($)", value=130, minimum=0 ) premium_suv_price = gr.Number( label="💰 SUV/Truck Price ($)", value=140, minimum=0 ) premium_description = gr.Textbox( label="📝 Premium Package Description", value="Complete wash, wax, interior detail, tire shine, dashboard treatment", lines=2 ) # Ultimate Package gr.HTML("<h4 style='color: #ea580c; margin: 2rem 0 1rem 0;'>🌟 Ultimate Package</h4>") with gr.Row(): ultimate_car_price = gr.Number( label="💰 Car Price ($)", value=200, minimum=0 ) ultimate_suv_price = gr.Number( label="💰 SUV/Truck Price ($)", value=210, minimum=0 ) ultimate_description = gr.Textbox( label="📝 Ultimate Package Description", value="Full detail, ceramic coating, paint protection, premium interior, engine bay cleaning", lines=2 ) save_pricing_btn = gr.Button("💾 Save Pricing Configuration", variant="primary") def mock_save_pricing(): return """ <div style="background: #10b981; color: white; padding: 1.5rem; border-radius: 10px; text-align: center;"> <h4 style="margin: 0 0 1rem 0;">✅ Pricing Configuration Saved!</h4> <p style="margin: 0;">AI will now quote your updated prices to customers immediately.</p> </div> """ save_pricing_btn.click(fn=mock_save_pricing, outputs=[gr.HTML()]) # Twilio Integration with gr.Tab("📞 Twilio Integration"): gr.HTML(f""" <div style="background: #ede9fe; border: 2px solid #7c3aed; border-radius: 15px; padding: 2rem; margin: 2rem 0;"> <h3 style="color: #5b21b6; margin: 0 0 1rem 0;">📞 Twilio Integration Settings</h3> <p style="color: #5b21b6; margin: 0 0 1rem 0;"> Configure your Twilio integration for SMS and Voice bots. Current Status: 🟢 Connected </p> <p style="color: #5b21b6; margin: 0;"> ⚠️ Changes to Twilio settings require system restart to take effect. </p> </div> """) with gr.Row(): with gr.Column(scale=1): twilio_sid_display = gr.Textbox( label="🔑 Account SID", value="Ac48c581...a1ba", interactive=False ) twilio_phone_display = gr.Textbox( label="📞 Twilio Phone Number", value="+18557059842", interactive=False ) with gr.Column(scale=1): forwarding_phone = gr.Textbox( label="📞 Call Forwarding Number (Your personal phone)", value="562-228-9429", placeholder="Your phone number where calls are forwarded" ) with gr.Row(): test_twilio_btn = gr.Button("🧪 Test Twilio Connection", variant="secondary") configure_webhooks_btn = gr.Button("🌐 Configure Webhooks", variant="secondary") send_test_sms_btn = gr.Button("📱 Send Test SMS", variant="secondary") def mock_test_twilio(): return f""" <div style="background: #10b981; color: white; padding: 1.5rem; border-radius: 10px;"> <h4 style="margin: 0 0 1rem 0;">✅ Twilio Connection Successful!</h4> <p style="margin: 0.5rem 0;"><strong>Account:</strong> Jay's Mobile Wash</p> <p style="margin: 0.5rem 0;"><strong>Status:</strong> Active</p> <p style="margin: 0.5rem 0;"><strong>Phone Numbers:</strong> 1</p> <p style="margin: 0;"><strong>Balance:</strong> $25.43</p> </div> """ test_twilio_btn.click(fn=mock_test_twilio, outputs=[gr.HTML()]) def _create_system_status_interface(self): """Create mock system status interface""" gr.HTML(f""" <div class="feature-card" style="padding: 2rem; border-radius: 15px; margin: 1rem 0;"> <h3 style="color: #1e3a8a; margin: 0 0 1rem 0;">🔧 Complete System Status</h3> <h4 style="color: #374151; margin: 1.5rem 0 1rem 0;">📊 System Health:</h4> <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;"> <div style="background: #d1fae5; padding: 1rem; border-radius: 8px; border-left: 4px solid #10b981;"> <strong>System Uptime</strong><br> {self.system_uptime}<br> <small>Started: 2025-06-13 06:17:32 UTC</small> </div> <div style="background: #ddd6fe; padding: 1rem; border-radius: 8px; border-left: 4px solid #7c3aed;"> <strong>Components Status</strong><br> 6/6 Active<br> <small>All core systems operational</small> </div> <div style="background: #fef3c7; padding: 1rem; border-radius: 8px; border-left: 4px solid #f59e0b;"> <strong>Platform</strong><br> Hugging Face Spaces<br> <small>Zero GPU enabled</small> </div> </div> <h4 style="color: #374151; margin: 1.5rem 0 1rem 0;">🏢 Business Configuration:</h4> <div style="background: #f8fafc; padding: 1rem; border-radius: 8px;"> <p><strong>Business Name:</strong> {self.business_info['name']}</p> <p><strong>Business Phone:</strong> {self.business_info['phone']}</p> <p><strong>AI Phone:</strong> {self.business_info['twilio_phone']}</p> <p><strong>Service Area:</strong> {self.business_info['service_area']}</p> <p><strong>Hours:</strong> {self.business_info['hours']}</p> <p><strong>Space URL:</strong> huggingface.co/spaces/jjmandog/jayscallcenter</p> </div> <h4 style="color: #374151; margin: 1.5rem 0 1rem 0;">💾 Database Optimization:</h4> <div style="background: #f0fdf4; padding: 1rem; border-radius: 8px; border-left: 4px solid #059669;"> <p><strong>Database Size:</strong> 47.2 MB / 800 MB limit</p> <p><strong>Usage:</strong> 5.9% (Healthy)</p> <p><strong>Last Cleanup:</strong> 2025-06-13 06:00:00 UTC</p> <p><strong>Records:</strong> SMS: 142, Calls: 38, Training: 25</p> <p><strong>Retention:</strong> 30 days detailed, <h4 style="color: #374151; margin: 1.5rem 0 1rem 0;">💾 Database Optimization:</h4> <div style="background: #f0fdf4; padding: 1rem; border-radius: 8px; border-left: 4px solid #059669;"> <p><strong>Database Size:</strong> 47.2 MB / 800 MB limit</p> <p><strong>Usage:</strong> 5.9% (Healthy)</p> <p><strong>Last Cleanup:</strong> 2025-06-13 06:00:00 UTC</p> <p><strong>Records:</strong> SMS: 142, Calls: 38, Training: 25</p> <p><strong>Retention:</strong> 30 days detailed, 90 days summary</p> </div> <div style="background: #1e3a8a; color: white; padding: 1.5rem; border-radius: 10px; margin-top: 2rem; text-align: center;"> <h4 style="margin: 0 0 1rem 0;">🚀 System Ready for Live Operation!</h4> <p style="margin: 0;">Complete AI system with real backend control, live integrations, and Zero GPU processing.</p> </div> </div> """) # Create the complete mock UI mock_ui = MockUIPreview() app = mock_ui.create_mock_ui() # If running directly, launch the mock UI if __name__ == "__main__": print("🚀 Launching Mock UI Preview...") print(f"👤 User: jjmandog") print(f"📅 Date: 2025-06-13 08:36:49") print("📱 This is a visual preview - no backend functionality") print("🎯 Perfect for testing UI design and layout") app.launch( server_name="0.0.0.0", server_port=7860, share=False, show_tips=False, show_error=True, auth=None, prevent_thread_lock=False, quiet=False ) - Initial Deployment