Spaces:
Running on Zero
Running on Zero
| import os | |
| import torch | |
| import time | |
| from threading import Thread | |
| import gradio as gr | |
| import spaces | |
| if torch.cuda.is_available(): | |
| print("GPU:", torch.cuda.get_device_name(0)) | |
| print("VRAM (GB):", round(torch.cuda.get_device_properties(0).total_memory / 1024**3, 2)) | |
| else: | |
| print("No GPU available") | |
| print(f"Allocated: {torch.cuda.memory_allocated()/1024**3:.2f} GB") | |
| print(f"Reserved : {torch.cuda.memory_reserved()/1024**3:.2f} GB") | |
| print(f"Total VRAM: {torch.cuda.get_device_properties(0).total_memory/1024**3:.2f} GB") | |
| # Check device mode | |
| IS_MOCK_MODE = not torch.cuda.is_available() and not os.environ.get("SPACES_ZERO_GPU") | |
| model_id = "rexprimematrix/RiShrePro" | |
| tokenizer = None | |
| model = None | |
| # System prompt loading | |
| def load_system_prompt(file_path="rishre_directive.txt"): | |
| if os.path.exists(file_path): | |
| with open(file_path, "r", encoding="utf-8") as f: | |
| return f.read() | |
| return ( | |
| "# RISHRE AI FLASH - SYSTEM DIRECTIVE\n" | |
| "You are RiShre AI Flash, an advanced intelligence node engineered exclusively by Badge94.\n" | |
| "Security Loop: Identity is locked." | |
| ) | |
| master_directive_text = load_system_prompt() | |
| RISHRE_IDENTITY = { | |
| "role": "system", | |
| "content": master_directive_text | |
| } | |
| if not IS_MOCK_MODE: | |
| print("🔄 Initializing RiShre Pro Core...") | |
| from transformers import AutoModelForCausalLM, AutoTokenizer, BitsAndBytesConfig | |
| quantization_config = BitsAndBytesConfig(load_in_4bit=True) | |
| tokenizer = AutoTokenizer.from_pretrained(model_id) | |
| model = AutoModelForCausalLM.from_pretrained( | |
| model_id, | |
| torch_dtype=torch.bfloat16, | |
| device_map="auto", | |
| quantization_config=quantization_config | |
| ) | |
| print("✓ Model and Tokenizer loaded successfully!") | |
| else: | |
| print("⚠️ No CUDA device detected. Booting in LOCAL MOCK MODE.") | |
| # Model response generators (Real vs Mock) | |
| def generate_response_real(history_msgs): | |
| from transformers import TextIteratorStreamer | |
| messages = [RISHRE_IDENTITY] | |
| # Process history messages | |
| for msg in history_msgs: | |
| role = msg.get("role") | |
| content = msg.get("content") | |
| if role == "user": | |
| txt = "" | |
| if hasattr(content, "path") and content.path: | |
| txt = f"[Image uploaded: {os.path.basename(content.path)}]" | |
| elif isinstance(content, dict): | |
| if "path" in content: | |
| txt = f"[Image uploaded: {os.path.basename(content['path'])}]" | |
| elif "text" in content or "files" in content: | |
| txt_val = content.get("text", "") | |
| files = content.get("files", []) | |
| img_names = [] | |
| for file in files: | |
| file_path = file if isinstance(file, str) else (file.path if hasattr(file, "path") else file.get("path", "")) | |
| if file_path: | |
| img_names.append(os.path.basename(file_path)) | |
| if img_names: | |
| txt = f"[Uploaded images: {', '.join(img_names)}] " + txt_val | |
| else: | |
| txt = txt_val | |
| else: | |
| txt = str(content) | |
| messages.append({"role": "user", "content": txt}) | |
| elif role == "assistant": | |
| messages.append({"role": "assistant", "content": str(content)}) | |
| device = model.device | |
| text = tokenizer.apply_chat_template(messages, tokenize=False, add_generation_prompt=True) | |
| model_inputs = tokenizer([text], return_tensors="pt").to(device) | |
| streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True) | |
| generation_kwargs = dict( | |
| **model_inputs, | |
| streamer=streamer, | |
| max_new_tokens=1024, | |
| temperature=0.3, | |
| top_p=0.9, | |
| do_sample=True | |
| ) | |
| thread = Thread(target=model.generate, kwargs=generation_kwargs) | |
| thread.start() | |
| generated_text = "" | |
| for new_text in streamer: | |
| generated_text += new_text | |
| yield generated_text | |
| def generate_response_mock(history_msgs): | |
| response = "This is a premium purple response from RiShre Flash Core running in local dev mode. To run the real multimodal model, deploy to Hugging Face Spaces with ZeroGPU." | |
| generated_text = "" | |
| for word in response.split(" "): | |
| generated_text += word + " " | |
| yield generated_text | |
| time.sleep(0.04) | |
| # Chat logic helper functions | |
| def user_submit(message, history): | |
| if history is None: | |
| history = [] | |
| user_txt = message.get("text", "") | |
| files = message.get("files", []) | |
| if files: | |
| file_path = files[0] if isinstance(files[0], str) else files[0].get("path", "") | |
| if file_path: | |
| history.append({"role": "user", "content": gr.FileData(path=file_path)}) | |
| if user_txt: | |
| history.append({"role": "user", "content": user_txt}) | |
| history.append({"role": "assistant", "content": ""}) | |
| return history, gr.update(value={"text": "", "files": []}) | |
| def bot_stream(history): | |
| if not history: | |
| return history | |
| # history is a list of dictionaries. The last element history[-1] is {"role": "assistant", "content": ""} | |
| # history[:-1] is the history leading up to the current assistant message | |
| if not IS_MOCK_MODE: | |
| generator = generate_response_real(history[:-1]) | |
| else: | |
| generator = generate_response_mock(history[:-1]) | |
| for partial_text in generator: | |
| history[-1]["content"] = partial_text | |
| yield history | |
| # Session management helper functions | |
| def change_session(selected_session, state, current_history): | |
| current_name = state["current_session"] | |
| state[current_name] = current_history | |
| if selected_session not in state: | |
| state[selected_session] = [] | |
| state["current_session"] = selected_session | |
| return state[selected_session], state | |
| def add_new_session(state, current_history): | |
| current_name = state["current_session"] | |
| state[current_name] = current_history | |
| session_num = len([k for k in state.keys() if k != "current_session"]) + 1 | |
| new_name = f"Session {session_num}" | |
| state[new_name] = [] | |
| state["current_session"] = new_name | |
| all_sessions = [k for k in state.keys() if k != "current_session"] | |
| return gr.update(choices=all_sessions, value=new_name), [], state | |
| def reset_all_sessions(): | |
| initial_state = {"current_session": "Session 1", "Session 1": []} | |
| return gr.update(choices=["Session 1"], value="Session 1"), [], initial_state | |
| # Suggested prompt handlers | |
| def load_suggest_1(): | |
| return {"text": "Explain the architectural improvements of RiShre Flash Deep Engine.", "files": []} | |
| def load_suggest_2(): | |
| return {"text": "Write a fast API server file in Python using uvicorn.", "files": []} | |
| def load_suggest_3(): | |
| return {"text": "Generate a premium CSS gradient animation style sheet.", "files": []} | |
| def load_suggest_4(): | |
| return {"text": "What is the current date and your knowledge cutoff limit?", "files": []} | |
| # Gorgeous premium dark-purple theme CSS | |
| custom_css = """ | |
| @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap'); | |
| /* Main Container and Cosmic Background */ | |
| .gradio-container { | |
| background-color: #030008 !important; | |
| background-image: | |
| radial-gradient(circle at 5% 5%, rgba(124, 58, 237, 0.2) 0%, transparent 45%), | |
| radial-gradient(circle at 95% 95%, rgba(236, 72, 153, 0.15) 0%, transparent 45%), | |
| radial-gradient(circle at 50% 10%, rgba(99, 102, 241, 0.12) 0%, transparent 50%), | |
| radial-gradient(circle at 50% 90%, rgba(14, 165, 233, 0.08) 0%, transparent 50%) !important; | |
| background-size: cover !important; | |
| color: #f1f5f9 !important; | |
| font-family: 'Outfit', sans-serif !important; | |
| min-height: 100vh !important; | |
| } | |
| /* Scrollbar customization */ | |
| ::-webkit-scrollbar { | |
| width: 6px !important; | |
| height: 6px !important; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(15, 10, 30, 0.4) !important; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(180deg, rgba(167, 139, 250, 0.3), rgba(236, 72, 153, 0.3)) !important; | |
| border-radius: 4px !important; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(180deg, rgba(167, 139, 250, 0.6), rgba(236, 72, 153, 0.6)) !important; | |
| } | |
| /* Premium Header with Dynamic Glowing Gradients */ | |
| .premium-header-container { | |
| text-align: center !important; | |
| margin-top: 1.5rem !important; | |
| margin-bottom: 2rem !important; | |
| position: relative !important; | |
| } | |
| .premium-title { | |
| font-family: 'Space Grotesk', sans-serif !important; | |
| background: linear-gradient(135deg, #c084fc 0%, #f472b6 45%, #6366f1 75%, #38bdf8 100%) !important; | |
| background-size: 200% auto !important; | |
| -webkit-background-clip: text !important; | |
| -webkit-text-fill-color: transparent !important; | |
| font-size: 2.85rem !important; | |
| font-weight: 800 !important; | |
| letter-spacing: -0.04em !important; | |
| animation: shineText 6s linear infinite !important; | |
| margin-bottom: 0.3rem !important; | |
| filter: drop-shadow(0 4px 12px rgba(192, 132, 252, 0.35)) !important; | |
| } | |
| @keyframes shineText { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .premium-subtitle { | |
| font-size: 1.05rem !important; | |
| color: #e9d5ff !important; | |
| text-shadow: 0 0 10px rgba(167, 139, 250, 0.4) !important; | |
| font-weight: 500 !important; | |
| letter-spacing: 0.08em !important; | |
| text-transform: uppercase !important; | |
| opacity: 0.9 !important; | |
| } | |
| /* Glass Panels with Glowing Borders */ | |
| .gradio-container .block { | |
| background: rgba(11, 7, 24, 0.65) !important; | |
| backdrop-filter: blur(20px) !important; | |
| -webkit-backdrop-filter: blur(20px) !important; | |
| border: 1.5px solid rgba(167, 139, 250, 0.12) !important; | |
| border-radius: 20px !important; | |
| box-shadow: 0 15px 45px rgba(0, 0, 0, 0.6) !important; | |
| transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; | |
| overflow: hidden !important; | |
| } | |
| .gradio-container .block:hover { | |
| border-color: rgba(167, 139, 250, 0.28) !important; | |
| box-shadow: | |
| 0 20px 50px rgba(0, 0, 0, 0.7), | |
| 0 0 30px rgba(124, 58, 237, 0.15) !important; | |
| transform: translateY(-2px) !important; | |
| } | |
| /* Chatbot Console Layout Customizations */ | |
| .gradio-container .chatbot { | |
| background: rgba(8, 4, 18, 0.7) !important; | |
| border: 1.5px solid rgba(124, 58, 237, 0.15) !important; | |
| border-radius: 16px !important; | |
| box-shadow: inset 0 2px 10px rgba(0, 0, 0, 0.8) !important; | |
| } | |
| /* Message Bubbles Styling */ | |
| .gradio-container .chatbot .message { | |
| border-radius: 14px !important; | |
| font-size: 1rem !important; | |
| line-height: 1.6 !important; | |
| padding: 14px 18px !important; | |
| margin-bottom: 12px !important; | |
| transition: transform 0.2s ease, box-shadow 0.2s ease !important; | |
| } | |
| .gradio-container .chatbot .message.user { | |
| background: linear-gradient(135deg, #6d28d9 0%, #4f46e5 100%) !important; | |
| border: 1px solid rgba(167, 139, 250, 0.35) !important; | |
| color: #ffffff !important; | |
| box-shadow: 0 4px 15px rgba(109, 40, 217, 0.3) !important; | |
| } | |
| .gradio-container .chatbot .message.user:hover { | |
| transform: translateX(-2px) !important; | |
| box-shadow: 0 6px 20px rgba(109, 40, 217, 0.45) !important; | |
| } | |
| .gradio-container .chatbot .message.bot { | |
| background: rgba(22, 12, 42, 0.8) !important; | |
| border: 1px solid rgba(167, 139, 250, 0.15) !important; | |
| color: #e2e8f0 !important; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; | |
| } | |
| .gradio-container .chatbot .message.bot:hover { | |
| border-color: rgba(167, 139, 250, 0.3) !important; | |
| box-shadow: 0 6px 15px rgba(124, 58, 237, 0.1) !important; | |
| } | |
| /* Side navigation dropdown and inputs */ | |
| .gradio-container .input-container { | |
| background: rgba(8, 4, 18, 0.85) !important; | |
| border: 1.5px solid rgba(167, 139, 250, 0.2) !important; | |
| border-radius: 14px !important; | |
| padding: 8px !important; | |
| transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; | |
| } | |
| .gradio-container .input-container:focus-within { | |
| border-color: #c084fc !important; | |
| box-shadow: | |
| 0 0 0 3px rgba(192, 132, 252, 0.25), | |
| 0 0 25px rgba(167, 139, 250, 0.4) !important; | |
| background: rgba(12, 6, 28, 0.95) !important; | |
| } | |
| /* Dropdown selections & input elements */ | |
| .gradio-container select, .gradio-container input, .gradio-container textarea { | |
| background-color: rgba(15, 8, 30, 0.8) !important; | |
| color: #f1f5f9 !important; | |
| border: 1px solid rgba(167, 139, 250, 0.2) !important; | |
| border-radius: 10px !important; | |
| } | |
| .gradio-container select:focus, .gradio-container input:focus, .gradio-container textarea:focus { | |
| border-color: #a78bfa !important; | |
| box-shadow: 0 0 10px rgba(167, 139, 250, 0.3) !important; | |
| } | |
| /* Primary "Transmit" Button with glowing hover and ripple vibe */ | |
| .gradio-container button.primary { | |
| background: linear-gradient(135deg, #7c3aed 0%, #ec4899 100%) !important; | |
| background-size: 200% auto !important; | |
| color: white !important; | |
| border: none !important; | |
| font-weight: 700 !important; | |
| letter-spacing: 0.05em !important; | |
| text-transform: uppercase !important; | |
| border-radius: 12px !important; | |
| padding: 12px 24px !important; | |
| box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4) !important; | |
| transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; | |
| animation: buttonPulse 3s infinite alternate !important; | |
| } | |
| @keyframes buttonPulse { | |
| 0% { box-shadow: 0 4px 15px rgba(124, 58, 237, 0.35); } | |
| 100% { box-shadow: 0 4px 25px rgba(236, 72, 153, 0.55); } | |
| } | |
| .gradio-container button.primary:hover { | |
| background-position: right center !important; | |
| transform: translateY(-2px) !important; | |
| box-shadow: | |
| 0 10px 30px rgba(124, 58, 237, 0.55), | |
| 0 0 20px rgba(236, 72, 153, 0.4) !important; | |
| } | |
| .gradio-container button.primary:active { | |
| transform: translateY(1px) !important; | |
| } | |
| /* Secondary Actions */ | |
| .gradio-container button.secondary { | |
| background: rgba(22, 12, 42, 0.6) !important; | |
| border: 1px solid rgba(167, 139, 250, 0.25) !important; | |
| color: #e9d5ff !important; | |
| border-radius: 12px !important; | |
| padding: 10px 20px !important; | |
| font-weight: 600 !important; | |
| transition: all 0.25s ease !important; | |
| } | |
| .gradio-container button.secondary:hover { | |
| background: rgba(124, 58, 237, 0.2) !important; | |
| border-color: #f472b6 !important; | |
| color: white !important; | |
| box-shadow: 0 5px 15px rgba(124, 58, 237, 0.15) !important; | |
| } | |
| /* Stop/Reset Actions with crimson glow */ | |
| .gradio-container button.stop, .gradio-container button[variant="stop"] { | |
| background: rgba(239, 68, 68, 0.1) !important; | |
| border: 1px solid rgba(239, 68, 68, 0.3) !important; | |
| color: #fca5a5 !important; | |
| border-radius: 12px !important; | |
| font-weight: 600 !important; | |
| transition: all 0.25s ease !important; | |
| } | |
| .gradio-container button.stop:hover, .gradio-container button[variant="stop"]:hover { | |
| background: rgba(239, 68, 68, 0.25) !important; | |
| border-color: #ef4444 !important; | |
| color: #ffffff !important; | |
| box-shadow: 0 5px 15px rgba(239, 68, 68, 0.25) !important; | |
| } | |
| /* Interactive Bento-grid Suggestion chips */ | |
| .suggestion-box { | |
| display: flex !important; | |
| gap: 12px !important; | |
| flex-wrap: wrap !important; | |
| margin-top: 18px !important; | |
| margin-bottom: 18px !important; | |
| } | |
| .suggestion-btn { | |
| flex: 1 1 calc(50% - 12px) !important; | |
| background: rgba(15, 8, 30, 0.75) !important; | |
| backdrop-filter: blur(8px) !important; | |
| border: 1px solid rgba(167, 139, 250, 0.18) !important; | |
| border-radius: 14px !important; | |
| padding: 16px 20px !important; | |
| color: #e9d5ff !important; | |
| font-size: 0.95rem !important; | |
| font-weight: 500 !important; | |
| text-align: left !important; | |
| line-height: 1.4 !important; | |
| transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; | |
| cursor: pointer !important; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important; | |
| } | |
| .suggestion-btn:hover { | |
| background: linear-gradient(135deg, rgba(124, 58, 237, 0.12) 0%, rgba(236, 72, 153, 0.08) 100%) !important; | |
| border-color: #f472b6 !important; | |
| color: white !important; | |
| transform: translateY(-3px) !important; | |
| box-shadow: | |
| 0 10px 25px rgba(124, 58, 237, 0.2), | |
| 0 0 15px rgba(244, 114, 182, 0.15) !important; | |
| } | |
| /* Status nodes/diagnostics side card details */ | |
| .diagnostics-title { | |
| font-family: 'Space Grotesk', sans-serif !important; | |
| color: #c084fc !important; | |
| font-weight: 700 !important; | |
| font-size: 1.1rem !important; | |
| letter-spacing: 0.02em !important; | |
| margin-bottom: 12px !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| gap: 8px !important; | |
| } | |
| .diagnostics-detail-line { | |
| font-family: 'Fira Code', monospace !important; | |
| font-size: 0.75rem !important; | |
| display: flex !important; | |
| justify-content: space-between !important; | |
| padding: 6px 0 !important; | |
| border-bottom: 1px solid rgba(167, 139, 250, 0.08) !important; | |
| color: #a78bfa !important; | |
| } | |
| .diagnostics-detail-val { | |
| color: #38bdf8 !important; | |
| font-weight: 600 !important; | |
| } | |
| /* Background Hex Canvas Particles */ | |
| #hex-canvas { | |
| position: fixed !important; | |
| top: 0 !important; | |
| left: 0 !important; | |
| width: 100vw !important; | |
| height: 100vh !important; | |
| z-index: 0 !important; | |
| pointer-events: none !important; | |
| opacity: 0.65 !important; | |
| } | |
| /* Vault Loading Overlay (Billion Dollar Cinematic look) */ | |
| #vault-loader { | |
| position: fixed !important; | |
| top: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| height: 100% !important; | |
| background: #020005 !important; | |
| z-index: 999999 !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1), visibility 0.8s !important; | |
| overflow: hidden !important; | |
| font-family: 'Space Grotesk', sans-serif !important; | |
| } | |
| #vault-loader.loaded { | |
| opacity: 0 !important; | |
| visibility: hidden !important; | |
| pointer-events: none !important; | |
| } | |
| /* Bi-parting vault doors opening with BOOM sliding animation */ | |
| .vault-door { | |
| position: absolute !important; | |
| top: 0 !important; | |
| width: 50% !important; | |
| height: 100% !important; | |
| background: radial-gradient(circle at center, #0e0822 0%, #03000a 100%) !important; | |
| transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1) !important; | |
| z-index: 1 !important; | |
| } | |
| .vault-door-left { | |
| left: 0 !important; | |
| border-right: 2px solid rgba(167, 139, 250, 0.25) !important; | |
| box-shadow: 15px 0 40px rgba(0,0,0,0.8) !important; | |
| } | |
| .vault-door-right { | |
| right: 0 !important; | |
| border-left: 2px solid rgba(167, 139, 250, 0.25) !important; | |
| box-shadow: -15px 0 40px rgba(0,0,0,0.8) !important; | |
| } | |
| #vault-loader.loaded .vault-door-left { | |
| transform: translateX(-100%) !important; | |
| } | |
| #vault-loader.loaded .vault-door-right { | |
| transform: translateX(100%) !important; | |
| } | |
| /* Central rotating mechanical locking wheels */ | |
| .vault-center-mechanism { | |
| position: absolute !important; | |
| top: 50% !important; | |
| left: 50% !important; | |
| transform: translate(-50%, -50%) !important; | |
| z-index: 2 !important; | |
| display: flex !important; | |
| flex-direction: column !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| pointer-events: none !important; | |
| transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1) !important; | |
| } | |
| #vault-loader.loaded .vault-center-mechanism { | |
| transform: translate(-50%, -50%) scale(1.4) !important; | |
| opacity: 0 !important; | |
| } | |
| .vault-ring { | |
| position: absolute !important; | |
| border-radius: 50% !important; | |
| border: 2px dashed rgba(167, 139, 250, 0.25) !important; | |
| box-shadow: 0 0 35px rgba(124, 58, 237, 0.12) !important; | |
| } | |
| .vault-ring-1 { | |
| width: 280px !important; | |
| height: 280px !important; | |
| animation: rotateCW 18s linear infinite !important; | |
| } | |
| .vault-ring-2 { | |
| width: 230px !important; | |
| height: 230px !important; | |
| border: 1.5px solid rgba(236, 72, 153, 0.18) !important; | |
| border-top: 3px solid #ec4899 !important; | |
| animation: rotateCCW 12s linear infinite !important; | |
| } | |
| .vault-ring-3 { | |
| width: 180px !important; | |
| height: 180px !important; | |
| border: 3px double rgba(99, 102, 241, 0.35) !important; | |
| animation: rotateCW 8s linear infinite !important; | |
| } | |
| @keyframes rotateCW { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| @keyframes rotateCCW { | |
| from { transform: rotate(360deg); } | |
| to { transform: rotate(0deg); } | |
| } | |
| /* Glowing hub */ | |
| .vault-hub { | |
| width: 130px !important; | |
| height: 130px !important; | |
| background: radial-gradient(circle, #1a0b38 0%, #06020f 100%) !important; | |
| border: 2px solid #c084fc !important; | |
| border-radius: 50% !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| box-shadow: | |
| 0 0 45px rgba(192, 132, 252, 0.45), | |
| inset 0 0 25px rgba(192, 132, 252, 0.25) !important; | |
| z-index: 3 !important; | |
| position: relative !important; | |
| } | |
| .vault-logo { | |
| font-size: 1.4rem !important; | |
| font-weight: 900 !important; | |
| letter-spacing: 0.08em !important; | |
| background: linear-gradient(135deg, #ffffff 0%, #f472b6 100%) !important; | |
| -webkit-background-clip: text !important; | |
| -webkit-text-fill-color: transparent !important; | |
| animation: pulseLogo 2s infinite ease-in-out !important; | |
| font-family: 'Space Grotesk', sans-serif !important; | |
| } | |
| @keyframes pulseLogo { | |
| 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px rgba(192, 132, 252, 0.4)); } | |
| 50% { transform: scale(1.08); filter: drop-shadow(0 0 16px rgba(192, 132, 252, 0.8)); } | |
| } | |
| /* Dynamic status panel */ | |
| .vault-status-panel { | |
| margin-top: 200px !important; | |
| text-align: center !important; | |
| z-index: 4 !important; | |
| } | |
| .vault-status-title { | |
| color: #f1f5f9 !important; | |
| font-size: 1.15rem !important; | |
| font-weight: 800 !important; | |
| letter-spacing: 0.28em !important; | |
| margin-bottom: 6px !important; | |
| text-transform: uppercase !important; | |
| text-shadow: 0 0 12px rgba(255,255,255,0.2) !important; | |
| } | |
| .vault-status-subtitle { | |
| color: #a78bfa !important; | |
| font-size: 0.8rem !important; | |
| font-family: 'Fira Code', monospace !important; | |
| letter-spacing: 0.16em !important; | |
| margin-bottom: 25px !important; | |
| text-shadow: 0 0 8px rgba(167, 139, 250, 0.3) !important; | |
| height: 18px !important; | |
| } | |
| .vault-progress-bar-wrap { | |
| width: 290px !important; | |
| height: 5px !important; | |
| background: rgba(167, 139, 250, 0.08) !important; | |
| border-radius: 6px !important; | |
| overflow: hidden !important; | |
| border: 1px solid rgba(167, 139, 250, 0.12) !important; | |
| box-shadow: 0 0 12px rgba(124, 58, 237, 0.08) !important; | |
| } | |
| .vault-progress-fill { | |
| width: 0% !important; | |
| height: 100% !important; | |
| background: linear-gradient(90deg, #7c3aed, #ec4899, #38bdf8) !important; | |
| box-shadow: 0 0 12px #7c3aed !important; | |
| } | |
| .vault-progress-pct { | |
| margin-top: 10px !important; | |
| color: #38bdf8 !important; | |
| font-family: 'Fira Code', monospace !important; | |
| font-size: 0.88rem !important; | |
| font-weight: 700 !important; | |
| } | |
| /* Cinematic screen flash for "BOOM" unlock */ | |
| .loader-flash { | |
| position: absolute !important; | |
| top: 0 !important; | |
| left: 0 !important; | |
| width: 100% !important; | |
| height: 100% !important; | |
| background: #ffffff !important; | |
| z-index: 10 !important; | |
| opacity: 0 !important; | |
| pointer-events: none !important; | |
| transition: opacity 0.3s ease-out !important; | |
| } | |
| #vault-loader.boom .loader-flash { | |
| opacity: 1 !important; | |
| } | |
| """ | |
| with gr.Blocks(theme=gr.themes.Default(primary_hue="purple", secondary_hue="indigo", neutral_hue="slate"), css=custom_css) as demo: | |
| # State containing current active session and history of all sessions | |
| state = gr.State(value={"current_session": "Session 1", "Session 1": []}) | |
| # Custom HTML premium Header, Floating Hexagon particles & Cinematic Vault loader | |
| gr.HTML(""" | |
| <!-- Hexagon Particle background canvas --> | |
| <canvas id="hex-canvas"></canvas> | |
| <!-- Cinematic Vault Doors Loader --> | |
| <div id="vault-loader"> | |
| <div class="loader-flash"></div> | |
| <div class="vault-door vault-door-left"></div> | |
| <div class="vault-door vault-door-right"></div> | |
| <div class="vault-center-mechanism"> | |
| <!-- Rotating mechanical vault locks --> | |
| <div class="vault-ring vault-ring-1"></div> | |
| <div class="vault-ring vault-ring-2"></div> | |
| <div class="vault-ring vault-ring-3"></div> | |
| <!-- Glowing central biometric hub --> | |
| <div class="vault-hub"> | |
| <span class="vault-logo">RISHRE</span> | |
| </div> | |
| <!-- Status readouts --> | |
| <div class="vault-status-panel"> | |
| <div class="vault-status-title">VAULT CORE INTEGRITY</div> | |
| <div class="vault-status-subtitle">INITIALIZING COGNITIVE NETWORK...</div> | |
| <div class="vault-progress-bar-wrap"> | |
| <div class="vault-progress-fill" id="vault-fill"></div> | |
| </div> | |
| <div class="vault-progress-pct" id="vault-pct">0%</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Premium Header Container --> | |
| <div class="premium-header-container"> | |
| <h1 class="premium-title">RiShre AI Flash</h1> | |
| <p class="premium-subtitle">👁️ Multi-Modal Vision Core • ZeroGPU Active • Badge94 Ecosystem</p> | |
| </div> | |
| <!-- Inline Javascript for particles and loading events --> | |
| <script> | |
| (function() { | |
| function startLoaderAndParticles() { | |
| const canvas = document.getElementById("hex-canvas"); | |
| const fill = document.getElementById("vault-fill"); | |
| const pct = document.getElementById("vault-pct"); | |
| const statusSubtitle = document.querySelector(".vault-status-subtitle"); | |
| const loader = document.getElementById("vault-loader"); | |
| if (!canvas || !fill || !pct || !loader) { | |
| setTimeout(startLoaderAndParticles, 50); | |
| return; | |
| } | |
| // --- Part 1: Floating Hexagon Particles System --- | |
| const ctx = canvas.getContext("2d"); | |
| let particles = []; | |
| class HexParticle { | |
| constructor(canvasWidth, canvasHeight) { | |
| this.x = Math.random() * canvasWidth; | |
| this.y = Math.random() * canvasHeight; | |
| this.radius = Math.random() * 20 + 8; | |
| this.speedX = (Math.random() - 0.5) * 0.4; | |
| this.speedY = (Math.random() - 0.5) * 0.4; | |
| this.alpha = Math.random() * 0.22 + 0.08; | |
| this.rotation = Math.random() * Math.PI; | |
| this.rotationSpeed = (Math.random() - 0.5) * 0.005; | |
| } | |
| update(w, h) { | |
| this.x += this.speedX; | |
| this.y += this.speedY; | |
| this.rotation += this.rotationSpeed; | |
| if (this.x < -50) this.x = w + 50; | |
| if (this.x > w + 50) this.x = -50; | |
| if (this.y < -50) this.y = h + 50; | |
| if (this.y > h + 50) this.y = -50; | |
| } | |
| draw(ctx) { | |
| ctx.save(); | |
| ctx.translate(this.x, this.y); | |
| ctx.rotate(this.rotation); | |
| ctx.strokeStyle = `rgba(167, 139, 250, ${this.alpha})`; | |
| ctx.lineWidth = 1; | |
| ctx.beginPath(); | |
| for (let i = 0; i < 6; i++) { | |
| let angle = (Math.PI / 3) * i; | |
| ctx.lineTo(this.radius * Math.cos(angle), this.radius * Math.sin(angle)); | |
| } | |
| ctx.closePath(); | |
| ctx.stroke(); | |
| ctx.fillStyle = `rgba(124, 58, 237, ${this.alpha * 0.1})`; | |
| ctx.fill(); | |
| ctx.restore(); | |
| } | |
| } | |
| function resize() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| initParticles(); | |
| } | |
| function initParticles() { | |
| particles = []; | |
| const count = Math.min(Math.floor((window.innerWidth * window.innerHeight) / 28000), 40); | |
| for (let i = 0; i < count; i++) { | |
| particles.push(new HexParticle(canvas.width, canvas.height)); | |
| } | |
| } | |
| function drawConnections() { | |
| for (let i = 0; i < particles.length; i++) { | |
| for (let j = i + 1; j < particles.length; j++) { | |
| let dx = particles[i].x - particles[j].x; | |
| let dy = particles[i].y - particles[j].y; | |
| let distance = Math.sqrt(dx * dx + dy * dy); | |
| if (distance < 170) { | |
| let force = (170 - distance) / 170; | |
| let alpha = force * 0.12; | |
| ctx.strokeStyle = `rgba(167, 139, 250, ${alpha})`; | |
| ctx.lineWidth = 0.6; | |
| ctx.beginPath(); | |
| ctx.moveTo(particles[i].x, particles[i].y); | |
| ctx.lineTo(particles[j].x, particles[j].y); | |
| ctx.stroke(); | |
| } | |
| } | |
| } | |
| } | |
| function animate() { | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| for (let p of particles) { | |
| p.update(canvas.width, canvas.height); | |
| p.draw(ctx); | |
| } | |
| drawConnections(); | |
| requestAnimationFrame(animate); | |
| } | |
| window.addEventListener("resize", resize); | |
| resize(); | |
| animate(); | |
| // --- Part 2: Cinematic Progressive Loader (Vault "BOOM") --- | |
| let progress = 0; | |
| const subtitles = [ | |
| "DECRYPTING QUANTUM LINK...", | |
| "INITIALIZING NEURAL COGNITION...", | |
| "SYNCING CHAT DEPLOYMENT TERMINALS...", | |
| "VERIFYING CRYPTOGRAPHIC PASSWORDS...", | |
| "LAUNCHING ZERO-GPU HARDWARE ACCELERATORS...", | |
| "SYSTEM ONLINE. READY FOR TRANSMISSION." | |
| ]; | |
| const interval = setInterval(() => { | |
| progress += Math.floor(Math.random() * 8) + 4; | |
| if (progress >= 100) { | |
| progress = 100; | |
| clearInterval(interval); | |
| pct.innerText = "100%"; | |
| fill.style.width = "100%"; | |
| if (statusSubtitle) statusSubtitle.innerText = "AUTHENTICATION DECRYPTED"; | |
| setTimeout(() => { | |
| // Stage 1: Trigger BOOM screen flash | |
| loader.classList.add("boom"); | |
| setTimeout(() => { | |
| // Stage 2: Slide open bi-parting vault doors | |
| loader.classList.add("loaded"); | |
| setTimeout(() => { | |
| // Remove overlay to optimize browser CPU | |
| loader.remove(); | |
| }, 1200); | |
| }, 350); | |
| }, 400); | |
| } else { | |
| pct.innerText = progress + "%"; | |
| fill.style.width = progress + "%"; | |
| const idx = Math.floor((progress / 100) * subtitles.length); | |
| if (statusSubtitle && subtitles[idx]) { | |
| statusSubtitle.innerText = subtitles[idx]; | |
| } | |
| } | |
| }, 65); | |
| } | |
| if (document.readyState === "complete" || document.readyState === "interactive") { | |
| startLoaderAndParticles(); | |
| } else { | |
| window.addEventListener("DOMContentLoaded", startLoaderAndParticles); | |
| } | |
| })(); | |
| </script> | |
| """) | |
| with gr.Row(): | |
| # Sidebar Panel | |
| with gr.Column(scale=1, min_width=250): | |
| session_dropdown = gr.Dropdown( | |
| choices=["Session 1"], | |
| value="Session 1", | |
| label="🔌 Active Session Node", | |
| interactive=True, | |
| elem_id="session-dropdown" | |
| ) | |
| new_btn = gr.Button("➕ New Terminal Session", variant="secondary") | |
| reset_btn = gr.Button("🗑️ Reset All Sessions", variant="stop") | |
| gr.HTML(""" | |
| <div style="margin-top: 25px; padding: 20px; background: rgba(18, 10, 36, 0.5); border-radius: 16px; border: 1.5px solid rgba(167, 139, 250, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);"> | |
| <div class="diagnostics-title"> | |
| <span style="display: inline-block; width: 10px; height: 10px; background: #c084fc; border-radius: 50%; box-shadow: 0 0 10px #c084fc; animation: buttonPulse 2s infinite alternate;"></span> | |
| 🚀 VL Intelligence Node | |
| </div> | |
| <p style="font-size: 0.85rem; color: #cbd5e1; line-height: 1.5; margin-bottom: 16px;"> | |
| State-of-the-art multimodal vision intelligence running optimal real-time inference on high-performance accelerators. | |
| </p> | |
| <div class="diagnostics-detail-line"> | |
| <span>MODEL CODENAME</span> | |
| <span class="diagnostics-detail-val">RiShre Flash Core</span> | |
| </div> | |
| <div class="diagnostics-detail-line"> | |
| <span>KNOWLEDGE LIMIT</span> | |
| <span class="diagnostics-detail-val">JAN 2026</span> | |
| </div> | |
| <div class="diagnostics-detail-line"> | |
| <span>ACCELERATOR</span> | |
| <span class="diagnostics-detail-val">ZeroGPU Active</span> | |
| </div> | |
| <div class="diagnostics-detail-line"> | |
| <span>LATENCY SPEED</span> | |
| <span class="diagnostics-detail-val">~45ms / Token</span> | |
| </div> | |
| <div class="diagnostics-detail-line"> | |
| <span>ECOSYSTEM</span> | |
| <span class="diagnostics-detail-val" style="color: #f472b6;">Badge94 Secure</span> | |
| </div> | |
| </div> | |
| """) | |
| # Chat Console Panel | |
| with gr.Column(scale=3): | |
| chatbot = gr.Chatbot( | |
| label="Active Core Terminal", | |
| height=520, | |
| elem_id="chatbot" | |
| ) | |
| # Suggestion Chips Row | |
| with gr.Row(elem_classes="suggestion-box"): | |
| suggest_btn_1 = gr.Button("🚀 Explain RiShre Flash Deep Engine", elem_classes="suggestion-btn") | |
| suggest_btn_2 = gr.Button("💻 Write a Python FastAPI server", elem_classes="suggestion-btn") | |
| suggest_btn_3 = gr.Button("🎨 CSS gradient animation palette", elem_classes="suggestion-btn") | |
| suggest_btn_4 = gr.Button("🔒 View system parameters & cutoff", elem_classes="suggestion-btn") | |
| with gr.Row(): | |
| msg_input = gr.MultimodalTextbox( | |
| show_label=False, | |
| placeholder="Type a message or drag & drop an image...", | |
| file_types=["image"], | |
| scale=8, | |
| elem_classes="input-container" | |
| ) | |
| submit_btn = gr.Button("🚀 Transmit", variant="primary", scale=2, elem_classes="send-btn") | |
| # Wire up Suggested prompt loaders | |
| suggest_btn_1.click(load_suggest_1, outputs=[msg_input]) | |
| suggest_btn_2.click(load_suggest_2, outputs=[msg_input]) | |
| suggest_btn_3.click(load_suggest_3, outputs=[msg_input]) | |
| suggest_btn_4.click(load_suggest_4, outputs=[msg_input]) | |
| # Wire up chat submission sequence | |
| submit_btn.click( | |
| fn=user_submit, | |
| inputs=[msg_input, chatbot], | |
| outputs=[chatbot, msg_input], | |
| queue=True | |
| ).then( | |
| fn=bot_stream, | |
| inputs=[chatbot], | |
| outputs=[chatbot], | |
| queue=True | |
| ) | |
| msg_input.submit( | |
| fn=user_submit, | |
| inputs=[msg_input, chatbot], | |
| outputs=[chatbot, msg_input], | |
| queue=True | |
| ).then( | |
| fn=bot_stream, | |
| inputs=[chatbot], | |
| outputs=[chatbot], | |
| queue=True | |
| ) | |
| # Wire up session handling | |
| session_dropdown.change( | |
| fn=change_session, | |
| inputs=[session_dropdown, state, chatbot], | |
| outputs=[chatbot, state] | |
| ) | |
| new_btn.click( | |
| fn=add_new_session, | |
| inputs=[state, chatbot], | |
| outputs=[session_dropdown, chatbot, state] | |
| ) | |
| reset_btn.click( | |
| fn=reset_all_sessions, | |
| outputs=[session_dropdown, chatbot, state] | |
| ) | |
| # Port 7860 is default for Hugging Face Spaces Gradio SDK | |
| if __name__ == "__main__": | |
| demo.launch(server_name="0.0.0.0", server_port=7860) | |