Spaces:
Running
on
L40S
Running
on
L40S
| import gradio as gr | |
| from app_playai import demo as demo_playai | |
| from app_allenai import demo as demo_allenai | |
| from app_claude import demo as demo_claude | |
| from app_experimental import demo as demo_experimental | |
| from app_fireworks import demo as demo_fireworks | |
| from app_flux import demo as demo_flux | |
| from app_gemini import demo as demo_gemini | |
| from app_groq import demo as demo_groq | |
| from app_hyperbolic import demo as demo_hyperbolic | |
| from app_ltx_video import demo as demo_ltx_video | |
| from app_marco_o1 import demo as demo_marco_o1 | |
| from app_mistral import demo as demo_mistral | |
| from app_nvidia import demo as demo_nvidia | |
| from app_openai import demo as demo_openai | |
| from app_perplexity import demo as demo_perplexity | |
| from app_qwen import demo as demo_qwen | |
| from app_sambanova import demo as demo_sambanova | |
| from app_together import demo as demo_together | |
| from app_xai import demo as demo_grok | |
| # Advanced theme configuration with enhanced animations | |
| css = """ | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| @keyframes gradient { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-10px) rotate(1deg); } | |
| 100% { transform: translateY(0px) rotate(0deg); } | |
| } | |
| @keyframes glow { | |
| 0% { text-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px rgba(255,255,255,0.8), 0 0 30px rgba(255,255,255,0.8); } | |
| 50% { text-shadow: 0 0 20px rgba(255,255,255,0.8), 0 0 30px rgba(255,255,255,0.8), 0 0 40px rgba(255,255,255,0.8); } | |
| 100% { text-shadow: 0 0 10px rgba(255,255,255,0.8), 0 0 20px rgba(255,255,255,0.8), 0 0 30px rgba(255,255,255,0.8); } | |
| } | |
| @keyframes fadeInBlur { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px) scale(0.98); | |
| filter: blur(10px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| filter: blur(0); | |
| } | |
| } | |
| @keyframes cyber-glow { | |
| 0% { box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff; } | |
| 50% { box-shadow: 0 0 10px #f0f, 0 0 20px #f0f, 0 0 30px #f0f; } | |
| 100% { box-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 15px #0ff; } | |
| } | |
| :root { | |
| --background-fill-primary: #0a0b1e; | |
| --border-color-primary: #2a2b4a; | |
| --neon-blue: #0ff; | |
| --neon-purple: #f0f; | |
| --space-black: #0a0b1e; | |
| } | |
| * { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| body { | |
| background: radial-gradient(circle at center, #1a1b3e 0%, #0a0b1e 100%); | |
| color: #fff; | |
| } | |
| #custom-header { | |
| background: linear-gradient(135deg, rgba(42, 43, 74, 0.7), rgba(10, 11, 30, 0.7)); | |
| backdrop-filter: blur(20px); | |
| padding: 2.5rem; | |
| border-radius: 20px; | |
| margin: 1.5rem; | |
| box-shadow: 0 0 30px rgba(0, 255, 255, 0.1); | |
| border: 1px solid rgba(0, 255, 255, 0.1); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| #custom-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| left: -50%; | |
| width: 200%; | |
| height: 200%; | |
| background: radial-gradient(circle at center, | |
| rgba(0, 255, 255, 0.1) 0%, | |
| transparent 50%); | |
| animation: gradient 15s linear infinite; | |
| } | |
| #custom-header h1 { | |
| color: white; | |
| font-size: 3.5rem; | |
| margin: 0; | |
| text-align: center; | |
| font-weight: 700; | |
| letter-spacing: 2px; | |
| animation: float 6s ease-in-out infinite, glow 3s ease-in-out infinite; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| #custom-header p { | |
| color: var(--neon-blue); | |
| text-align: center; | |
| margin: 1rem 0 0 0; | |
| font-size: 1.3rem; | |
| opacity: 0.9; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| } | |
| .tab-nav { | |
| background: rgba(42, 43, 74, 0.7) !important; | |
| backdrop-filter: blur(20px) !important; | |
| border-radius: 15px !important; | |
| padding: 1rem !important; | |
| margin: 1rem !important; | |
| border: 1px solid rgba(0, 255, 255, 0.1) !important; | |
| animation: cyber-glow 4s infinite alternate !important; | |
| } | |
| .tab-nav button { | |
| color: white !important; | |
| border-radius: 10px !important; | |
| margin: 0.4rem !important; | |
| padding: 1rem 1.5rem !important; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| background: rgba(10, 11, 30, 0.7) !important; | |
| border: 1px solid rgba(0, 255, 255, 0.2) !important; | |
| text-transform: uppercase !important; | |
| letter-spacing: 1px !important; | |
| font-weight: 500 !important; | |
| } | |
| .tab-nav button:hover { | |
| transform: translateY(-3px) scale(1.02) !important; | |
| background: rgba(0, 255, 255, 0.1) !important; | |
| border-color: var(--neon-blue) !important; | |
| box-shadow: 0 0 20px rgba(0, 255, 255, 0.3) !important; | |
| } | |
| .tab-nav button.selected { | |
| background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(255, 0, 255, 0.2)) !important; | |
| border: 1px solid var(--neon-blue) !important; | |
| box-shadow: 0 0 20px rgba(0, 255, 255, 0.4) !important; | |
| } | |
| .message { | |
| border-radius: 15px !important; | |
| padding: 1.5rem !important; | |
| margin: 1rem 0 !important; | |
| background: rgba(42, 43, 74, 0.3) !important; | |
| backdrop-filter: blur(10px) !important; | |
| border: 1px solid rgba(0, 255, 255, 0.1) !important; | |
| animation: fadeInBlur 0.5s ease-out !important; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| } | |
| .message:hover { | |
| transform: translateY(-3px) scale(1.01) !important; | |
| box-shadow: 0 0 30px rgba(0, 255, 255, 0.2) !important; | |
| } | |
| .user-message { | |
| background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(42, 43, 74, 0.3)) !important; | |
| border-left: 4px solid var(--neon-blue) !important; | |
| } | |
| .bot-message { | |
| background: linear-gradient(135deg, rgba(255, 0, 255, 0.1), rgba(42, 43, 74, 0.3)) !important; | |
| border-left: 4px solid var(--neon-purple) !important; | |
| } | |
| textarea, input[type="text"] { | |
| background: rgba(10, 11, 30, 0.7) !important; | |
| border: 1px solid rgba(0, 255, 255, 0.2) !important; | |
| border-radius: 12px !important; | |
| color: white !important; | |
| backdrop-filter: blur(10px) !important; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; | |
| font-family: 'Space Grotesk', sans-serif !important; | |
| } | |
| textarea:focus, input[type="text"]:focus { | |
| border-color: var(--neon-blue) !important; | |
| box-shadow: 0 0 20px rgba(0, 255, 255, 0.2) !important; | |
| transform: translateY(-2px) !important; | |
| } | |
| ::-webkit-scrollbar { | |
| width: 12px; | |
| height: 12px; | |
| background: var(--space-black); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)); | |
| border-radius: 6px; | |
| border: 3px solid var(--space-black); | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: linear-gradient(135deg, var(--neon-purple), var(--neon-blue)); | |
| } | |
| .loading-container { | |
| position: relative; | |
| width: 50px; | |
| height: 50px; | |
| } | |
| @keyframes neural-pulse { | |
| 0% { transform: scale(1); opacity: 0.5; } | |
| 50% { transform: scale(1.5); opacity: 0; } | |
| 100% { transform: scale(1); opacity: 0.5; } | |
| } | |
| .neural-node { | |
| position: absolute; | |
| width: 4px; | |
| height: 4px; | |
| background: var(--neon-blue); | |
| border-radius: 50%; | |
| animation: neural-pulse 2s infinite; | |
| } | |
| """ | |
| with gr.Blocks(css=css, theme=gr.themes.Soft()) as demo: | |
| with gr.Column(): | |
| gr.HTML(""" | |
| <div id="custom-header"> | |
| <h1>🤖 NeuraTalk AI</h1> | |
| <p>Advanced Neural Interface for Multi-Model AI Communication</p> | |
| <style> | |
| @keyframes neural-spark { | |
| 0% { transform: scale(0) rotate(0deg); opacity: 0; } | |
| 50% { transform: scale(1) rotate(180deg); opacity: 1; } | |
| 100% { transform: scale(0) rotate(360deg); opacity: 0; } | |
| } | |
| .neural-spark { | |
| position: absolute; | |
| width: 2px; | |
| height: 2px; | |
| background: linear-gradient(135deg, var(--neon-blue), var(--neon-purple)); | |
| border-radius: 50%; | |
| animation: neural-spark 3s infinite; | |
| } | |
| </style> | |
| <script> | |
| function createNeuralNetwork() { | |
| const header = document.getElementById('custom-header'); | |
| const particleCount = 30; | |
| const connectionCount = 20; | |
| // Create particles | |
| for (let i = 0; i < particleCount; i++) { | |
| const spark = document.createElement('div'); | |
| spark.className = 'neural-spark'; | |
| spark.style.left = Math.random() * 100 + '%'; | |
| spark.style.top = Math.random() * 100 + '%'; | |
| spark.style.animationDelay = Math.random() * 3 + 's'; | |
| header.appendChild(spark); | |
| } | |
| // Create neural connections | |
| const canvas = document.createElement('canvas'); | |
| canvas.style.position = 'absolute'; | |
| canvas.style.top = '0'; | |
| canvas.style.left = '0'; | |
| canvas.style.width = '100%'; | |
| canvas.style.height = '100%'; | |
| canvas.style.pointerEvents = 'none'; | |
| header.appendChild(canvas); | |
| const ctx = canvas.getContext('2d'); | |
| function animate() { | |
| canvas.width = header.offsetWidth; | |
| canvas.height = header.offsetHeight; | |
| ctx.strokeStyle = 'rgba(0, 255, 255, 0.1)'; | |
| ctx.lineWidth = 1; | |
| for (let i = 0; i < connectionCount; i++) { | |
| const x1 = Math.random() * canvas.width; | |
| const y1 = Math.random() * canvas.height; | |
| const x2 = Math.random() * canvas.width; | |
| const y2 = Math.random() * canvas.height; | |
| ctx.beginPath(); | |
| ctx.moveTo(x1, y1); | |
| ctx.lineTo(x2, y2); | |
| ctx.stroke(); | |
| } | |
| requestAnimationFrame(animate); | |
| } | |
| animate(); | |
| } | |
| window.addEventListener('load', createNeuralNetwork); | |
| </script> | |
| </div> | |
| """) | |
| with gr.Tabs(elem_classes="tab-nav"): | |
| with gr.Tab("PlayAI"): | |
| demo_playai.render() | |
| with gr.Tab("Grok"): | |
| demo_grok.render() | |
| with gr.Tab("Hyperbolic"): | |
| demo_hyperbolic.render() | |
| gr.Markdown( | |
| """ | |
| <div> | |
| <img src="https://storage.googleapis.com/public-arena-asset/hyperbolic_logo.png" alt="Hyperbolic Logo" style="height: 50px; margin-right: 10px;"> | |
| </div> | |
| **Note:** This model is supported by Hyperbolic. Build your AI apps at [Hyperbolic](https://app.hyperbolic.xyz/). | |
| """ | |
| ) | |
| with gr.Tab("Gemini"): | |
| demo_gemini.render() | |
| with gr.Tab("ChatGPT"): | |
| demo_openai.render() | |
| with gr.Tab("Claude"): | |
| demo_claude.render() | |
| with gr.Tab("Qwen"): | |
| demo_qwen.render() | |
| with gr.Tab("Allen AI"): | |
| demo_allenai.render() | |
| with gr.Tab("Perplexity"): | |
| demo_perplexity.render() | |
| with gr.Tab("Experimental"): | |
| demo_experimental.render() | |
| with gr.Tab("Meta Llama"): | |
| demo_sambanova.render() | |
| gr.Markdown( | |
| "**Note:** You need to use a SambaNova API key from [SambaNova Cloud](https://cloud.sambanova.ai/)." | |
| ) | |
| with gr.Tab("Marco-o1"): | |
| demo_marco_o1.render() | |
| with gr.Tab("LTX Video"): | |
| demo_ltx_video.render() | |
| with gr.Tab("Groq"): | |
| demo_groq.render() | |
| with gr.Tab("Mistral"): | |
| demo_mistral.render() | |
| with gr.Tab("Fireworks"): | |
| demo_fireworks.render() | |
| with gr.Tab("Together"): | |
| demo_together.render() | |
| with gr.Tab("NVIDIA"): | |
| demo_nvidia.render() | |
| with gr.Tab("Flux"): | |
| demo_flux.render() | |
| if __name__ == "__main__": | |
| demo.queue(api_open=False).launch(ssr_mode=False, show_api=False) | |