Spaces:
Running
Running
| """Shared CSS for the Gradio/Hugging Face Space interface.""" | |
| AIKO_CSS = r""" | |
| :root { | |
| --aiko-bg: #080810; | |
| --aiko-text: #dacdff; | |
| --aiko-muted: #8c7ab6; | |
| --aiko-accent: #b68cff; | |
| --aiko-user: #9be8ff; | |
| --aiko-bot: #d8c8ff; | |
| } | |
| html, body, .gradio-container, main, footer { | |
| background: radial-gradient(circle at top, #1b1432 0, var(--aiko-bg) 44%, #050509 100%) !important; | |
| color: var(--aiko-text) !important; | |
| margin: 0 !important; | |
| padding: 0 !important; | |
| } | |
| .gradio-container *, .gradio-container .prose, .gradio-container label { | |
| color: var(--aiko-text); | |
| } | |
| #aiko-shell { max-width: 1180px; margin: 0 auto; padding: 0 12px 12px; } | |
| /* ── Title header ──────────────────────────────────────────────────── */ | |
| #aiko-title { | |
| display: block; | |
| font-size: 1.4rem; | |
| font-weight: 600; | |
| letter-spacing: .08em; | |
| color: #ecdeff; | |
| text-shadow: 0 0 18px rgba(155, 124, 255, .55); | |
| padding: 10px 8px 10px; | |
| text-align: left; | |
| } | |
| /* Avatar card is the relative anchor for all overlays */ | |
| #aiko-avatar-card { | |
| position: relative; | |
| border-radius: 22px; | |
| overflow: visible; | |
| border: 1px solid rgba(155,127,212,0.34); | |
| background: #080810; | |
| box-shadow: 0 22px 80px rgba(0,0,0,0.42); | |
| } | |
| #aiko-vrm-frame { | |
| display: block; | |
| width: 100%; | |
| height: min(78vh, 760px); | |
| min-height: 480px; | |
| border: 0; | |
| background: #080810; | |
| } | |
| /* Audio: rendered but invisible so autoplay isn't blocked */ | |
| #aiko-audio { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| opacity: 0; | |
| overflow: hidden; | |
| pointer-events: none; | |
| } | |
| #aiko-audio * { | |
| background: transparent !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| } | |
| #aiko-tts-text { display: none !important; } | |
| /* ── Emotion label (top-left of avatar card) ──────────────────────── */ | |
| #aiko-emotion-label { | |
| position: absolute; | |
| top: 10px; | |
| left: 14px; | |
| z-index: 10; | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| letter-spacing: 0.12em; | |
| text-transform: uppercase; | |
| color: rgba(220, 200, 255, 0.75); | |
| text-shadow: 0 0 8px rgba(150,100,255,0.6); | |
| pointer-events: none; | |
| transition: opacity 0.4s ease; | |
| } | |
| #aiko-emotion-label ~ #aiko-emotion-label, | |
| body > #aiko-emotion-label, | |
| .gradio-container > #aiko-emotion-label { | |
| display: none !important; | |
| } | |
| /* ── Hide Gradio message action buttons ── */ | |
| #aiko-chatbot .message-buttons, | |
| #aiko-chatbot .icon-button, | |
| #aiko-chatbot [data-testid="like"], | |
| #aiko-chatbot [data-testid="dislike"], | |
| #aiko-chatbot [data-testid="copy"], | |
| #aiko-chatbot [data-testid="edit"], | |
| #aiko-chatbot button.copy, | |
| #aiko-chatbot button.edit, | |
| #aiko-chatbot .action-button, | |
| #aiko-chatbot [class*="action"], | |
| #aiko-chatbot [class*="button-row"], | |
| #aiko-chatbot [class*="buttons"] { | |
| display: none !important; | |
| } | |
| /* ── Chat overlay: right side, borderless ─────────────────────────── */ | |
| #aiko-chat-overlay { | |
| position: absolute; | |
| top: 48px; | |
| right: 80px; | |
| bottom: 76px; | |
| width: 44%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| gap: 0; | |
| pointer-events: auto; | |
| z-index: 5; | |
| overflow: hidden; | |
| } | |
| #aiko-chatbot, | |
| #aiko-chatbot * { | |
| pointer-events: auto !important; | |
| } | |
| /* Kill every background/border Gradio injects on chatbot */ | |
| #aiko-chatbot, | |
| #aiko-chatbot > div, | |
| #aiko-chatbot > div > div, | |
| #aiko-chatbot .wrap, | |
| #aiko-chatbot .bubble-wrap, | |
| #aiko-chatbot .message-wrap, | |
| #aiko-chatbot .message-wrap > div, | |
| #aiko-chatbot .message-row, | |
| #aiko-chatbot .message-row > div, | |
| #aiko-chatbot .message-row .prose, | |
| #aiko-chatbot .chat-message, | |
| #aiko-chatbot [data-testid="bot"], | |
| #aiko-chatbot [data-testid="user"], | |
| #aiko-chatbot [data-testid="bot"] *, | |
| #aiko-chatbot [data-testid="user"] *, | |
| #aiko-chatbot .md, | |
| #aiko-chatbot .md > *, | |
| #aiko-chatbot [class*="message"], | |
| #aiko-chatbot [class*="bubble"], | |
| #aiko-chatbot [class*="wrap"], | |
| #aiko-chatbot [class*="chat"] { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| } | |
| #aiko-chatbot.block, | |
| #aiko-chatbot .block, | |
| div:has(> #aiko-chatbot) { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| padding: 0 !important; | |
| } | |
| /* Scrollable chatbot */ | |
| #aiko-chatbot { | |
| overflow-y: auto !important; | |
| scrollbar-width: thin; | |
| scrollbar-color: rgba(182,140,255,0.35) transparent; | |
| height: 100% !important; | |
| max-height: 100% !important; | |
| padding: 0 4px 0 0 !important; | |
| } | |
| #aiko-chatbot::-webkit-scrollbar { width: 4px; } | |
| #aiko-chatbot::-webkit-scrollbar-track { background: transparent; } | |
| #aiko-chatbot::-webkit-scrollbar-thumb { | |
| background: rgba(182,140,255,0.35); | |
| border-radius: 4px; | |
| } | |
| /* Caption-style text */ | |
| #aiko-chatbot .message, | |
| #aiko-chatbot .bubble, | |
| #aiko-chatbot [data-testid="bot"], | |
| #aiko-chatbot [data-testid="user"] { | |
| padding: 1px 0 !important; | |
| margin: 0 !important; | |
| font-size: 0.66rem !important; | |
| line-height: 1.25 !important; | |
| text-shadow: 0 1px 6px rgba(0,0,0,0.9), 0 0 16px rgba(100,60,180,0.45); | |
| max-width: 100% !important; | |
| } | |
| #aiko-chatbot p, | |
| #aiko-chatbot .md p { | |
| margin: 0 0 2px 0 !important; | |
| } | |
| #aiko-chatbot .message-row, | |
| #aiko-chatbot [class*="message-row"] { | |
| margin-bottom: 2px !important; | |
| padding: 0 !important; | |
| } | |
| #aiko-chatbot [data-testid="user"], | |
| #aiko-chatbot [data-testid="user"] * { | |
| color: var(--aiko-user) !important; | |
| text-align: right; | |
| } | |
| #aiko-chatbot [data-testid="bot"], | |
| #aiko-chatbot [data-testid="bot"] * { | |
| color: var(--aiko-bot) !important; | |
| } | |
| /* ── Input row ───────────────────────────────────────────────────── */ | |
| #aiko-input-row { | |
| position: absolute !important; | |
| left: 16px !important; | |
| right: 16px !important; | |
| bottom: 16px !important; | |
| z-index: 7 !important; | |
| display: flex !important; | |
| gap: 6px !important; | |
| align-items: center !important; | |
| flex-wrap: nowrap !important; | |
| } | |
| /* Flatten Gradio's wrapper divs so they don't break flex layout */ | |
| #aiko-input-row > div { | |
| display: contents !important; | |
| } | |
| #aiko-msg { | |
| flex: 1 1 auto; | |
| min-width: 0; | |
| } | |
| /* Remove Gradio textbox wrapper backgrounds */ | |
| #aiko-msg, | |
| #aiko-msg > div, | |
| #aiko-msg .wrap, | |
| #aiko-msg .container { | |
| background: transparent !important; | |
| background-color: transparent !important; | |
| border: none !important; | |
| box-shadow: none !important; | |
| padding: 0 !important; | |
| min-width: 0 !important; | |
| flex: 1 1 auto !important; | |
| } | |
| /* Actual textarea */ | |
| #aiko-msg textarea, | |
| #aiko-msg input { | |
| background: rgba(8, 8, 16, 0.80) !important; | |
| background-color: rgba(8, 8, 16, 0.80) !important; | |
| backdrop-filter: blur(6px) !important; | |
| -webkit-backdrop-filter: blur(6px) !important; | |
| color: var(--aiko-accent) !important; | |
| border: 1px solid rgba(182,140,255,0.55) !important; | |
| border-radius: 10px !important; | |
| box-shadow: none !important; | |
| min-height: 42px !important; | |
| width: 100% !important; | |
| } | |
| textarea::placeholder, input::placeholder { color: var(--aiko-muted) !important; } | |
| /* Mic + cam + send buttons — fixed square size, never shrink */ | |
| #aiko-mic-btn, | |
| #aiko-mic-btn button, | |
| #aiko-cam-btn, | |
| #aiko-cam-btn button, | |
| #aiko-send, | |
| #aiko-send button { | |
| width: 42px !important; | |
| min-width: 42px !important; | |
| max-width: 42px !important; | |
| height: 42px !important; | |
| min-height: 42px !important; | |
| padding: 0 !important; | |
| border-radius: 10px !important; | |
| display: flex !important; | |
| align-items: center !important; | |
| justify-content: center !important; | |
| flex-shrink: 0 !important; | |
| flex-grow: 0 !important; | |
| } | |
| #aiko-cam-btn, | |
| #aiko-cam-btn button, | |
| #aiko-send, | |
| #aiko-send button { | |
| margin-right: 36px !important; | |
| } | |
| #aiko-mic-btn, | |
| #aiko-mic-btn button { | |
| margin-right: 6px !important; | |
| } | |
| /* Send button */ | |
| #aiko-send, | |
| #aiko-send button { | |
| background: linear-gradient(135deg, #7652d6, #bd7cff) !important; | |
| border: 0 !important; | |
| color: #fff !important; | |
| } | |
| /* Mic + Cam buttons */ | |
| #aiko-mic-btn, | |
| #aiko-mic-btn button, | |
| #aiko-cam-btn, | |
| #aiko-cam-btn button { | |
| background: rgba(118, 82, 214, 0.25) !important; | |
| border: 1px solid rgba(182, 140, 255, 0.6) !important; | |
| box-shadow: none !important; | |
| font-size: 1.2rem !important; | |
| color: var(--aiko-accent) !important; | |
| } | |
| /* Hidden recorder — rendered in DOM but zero visual footprint */ | |
| #aiko-audio-b64, | |
| #aiko-vision-b64 { | |
| display: none !important; | |
| } | |
| #aiko-mic-audio { | |
| position: absolute !important; | |
| width: 1px !important; | |
| height: 1px !important; | |
| opacity: 0 !important; | |
| pointer-events: none !important; | |
| overflow: hidden !important; | |
| left: -9999px !important; | |
| top: -9999px !important; | |
| } | |
| #aiko-note { display: none; } | |
| .gradio-container footer { display: none !important; } | |
| .hide { display: none !important; } | |
| /* ── Custom Webcam Modal ─────────────────────────────────────────── */ | |
| .aiko-modal-overlay { | |
| position: fixed !important; | |
| inset: 0; | |
| z-index: 10000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(5, 5, 9, 0.85); | |
| backdrop-filter: blur(6px); | |
| } | |
| .aiko-modal-card { | |
| width: min(420px, 90vw); | |
| border-radius: 18px; | |
| background: radial-gradient(circle at top, #1b1432 0, #080810 70%); | |
| border: 1px solid rgba(155,127,212,0.4); | |
| box-shadow: 0 22px 80px rgba(0,0,0,0.55); | |
| padding: 18px 22px; | |
| text-align: center; | |
| } | |
| .aiko-modal-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 14px; | |
| } | |
| .aiko-modal-header h3 { | |
| margin: 0; | |
| font-size: 1.15rem; | |
| color: #ecdeff; | |
| text-shadow: 0 0 10px rgba(155, 124, 255, 0.45); | |
| } | |
| .aiko-modal-close { | |
| background: none; | |
| border: none; | |
| font-size: 1.6rem; | |
| color: var(--aiko-muted); | |
| cursor: pointer; | |
| padding: 0 4px; | |
| line-height: 1; | |
| } | |
| .aiko-modal-close:hover { | |
| color: var(--aiko-accent); | |
| } | |
| .aiko-modal-body { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .aiko-btn { | |
| padding: 10px 16px; | |
| border-radius: 10px; | |
| border: 1px solid rgba(182, 140, 255, 0.4); | |
| background: rgba(118, 82, 214, 0.12); | |
| color: var(--aiko-accent); | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| width: 100%; | |
| margin-bottom: 8px; | |
| box-sizing: border-box; | |
| } | |
| .aiko-btn:hover { | |
| background: rgba(182, 140, 255, 0.25); | |
| border-color: rgba(182, 140, 255, 0.7); | |
| } | |
| .aiko-btn.primary { | |
| background: linear-gradient(135deg, #7652d6, #bd7cff) !important; | |
| border: 0 !important; | |
| color: #fff !important; | |
| } | |
| .aiko-btn.primary:hover { | |
| opacity: 0.9; | |
| } | |
| #aiko-webcam-video { | |
| width: 100%; | |
| border-radius: 12px; | |
| border: 1px solid rgba(155, 127, 212, 0.4); | |
| margin-bottom: 12px; | |
| transform: scaleX(-1); | |
| aspect-ratio: 4/3; | |
| object-fit: cover; | |
| background: #000; | |
| } | |
| .aiko-webcam-controls { | |
| display: flex; | |
| gap: 10px; | |
| width: 100%; | |
| } | |
| """ | |
| AIKO_CSS += r""" | |
| /* ── Login modal overlay ──────────────────────────────────────────── */ | |
| #aiko-login-overlay { | |
| position: fixed !important; | |
| inset: 0; | |
| z-index: 9999; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(5, 5, 9, 0.78); | |
| backdrop-filter: blur(6px); | |
| } | |
| #aiko-login-overlay > div { | |
| position: static !important; | |
| inset: auto !important; | |
| } | |
| #aiko-login-card { | |
| width: min(380px, 90vw); | |
| max-height: 50vh; | |
| overflow-y: auto; | |
| padding: 20px 24px; | |
| border-radius: 18px; | |
| background: radial-gradient(circle at top, #1b1432 0, #080810 70%); | |
| border: 1px solid rgba(155,127,212,0.4); | |
| box-shadow: 0 22px 80px rgba(0,0,0,0.55); | |
| text-align: center; | |
| } | |
| #aiko-login-card h1 { | |
| color: #ecdeff; | |
| text-shadow: 0 0 18px rgba(155, 124, 255, .55); | |
| margin: 0 0 8px; | |
| font-size: 1.4rem; | |
| letter-spacing: .06em; | |
| } | |
| .aiko-subtitle { | |
| color: var(--aiko-muted); | |
| margin: 0 0 16px; | |
| font-size: 0.85rem; | |
| } | |
| .aiko-disclaimer { | |
| color: var(--aiko-muted); | |
| font-size: 0.85rem; | |
| line-height: 1.4; | |
| text-align: left; | |
| margin: 0 0 16px; | |
| padding: 10px 12px; | |
| border: 1px solid rgba(182,140,255,0.25); | |
| border-radius: 10px; | |
| background: rgba(118, 82, 214, 0.08); | |
| } | |
| #aiko-login-card button { | |
| background: linear-gradient(135deg, #7652d6, #bd7cff) !important; | |
| border: 0 !important; | |
| border-radius: 10px !important; | |
| color: #fff !important; | |
| width: 100% !important; | |
| padding: 10px !important; | |
| font-weight: 600 !important; | |
| } | |
| """ | |
| AIKO_CSS += r""" | |
| /* ── Info / "About Aiko" modal overlay (shown once after login) ───── */ | |
| #aiko-info-overlay { | |
| position: fixed !important; | |
| inset: 0; | |
| z-index: 9998; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| background: rgba(5, 5, 9, 0.78); | |
| backdrop-filter: blur(6px); | |
| } | |
| #aiko-info-overlay > div { | |
| position: static !important; | |
| inset: auto !important; | |
| } | |
| #aiko-info-card { | |
| width: min(600px, 200vw); | |
| max-height: 80vh; | |
| overflow-y: auto; | |
| padding: 24px 28px; | |
| border-radius: 18px; | |
| background: radial-gradient(circle at top, #1b1432 0, #080810 70%); | |
| border: 1px solid rgba(155,127,212,0.4); | |
| box-shadow: 0 22px 80px rgba(0,0,0,0.55); | |
| } | |
| #aiko-info-card h2 { | |
| color: #ecdeff; | |
| text-shadow: 0 0 18px rgba(155, 124, 255, .55); | |
| margin: 0 0 12px; | |
| font-size: 1.25rem; | |
| letter-spacing: .04em; | |
| } | |
| #aiko-info-card p { | |
| color: var(--aiko-text); | |
| font-size: 0.88rem; | |
| line-height: 1.6; | |
| margin: 0 0 10px; | |
| } | |
| #aiko-info-card ul { | |
| margin: 4px 0 14px; | |
| padding-left: 20px; | |
| } | |
| #aiko-info-card li { | |
| color: var(--aiko-text); | |
| font-size: 0.85rem; | |
| line-height: 1.6; | |
| margin-bottom: 4px; | |
| } | |
| #aiko-info-card strong { | |
| color: #ecdeff; | |
| } | |
| #aiko-info-ok-btn, | |
| #aiko-info-ok-btn button { | |
| background: linear-gradient(135deg, #7652d6, #bd7cff) !important; | |
| border: 0 !important; | |
| border-radius: 10px !important; | |
| color: #fff !important; | |
| width: 100% !important; | |
| padding: 10px !important; | |
| font-weight: 600 !important; | |
| margin-top: 8px !important; | |
| } | |
| """ |