AliceBlueCode/DEF
0
1<!DOCTYPE html>2<html data-theme="light">3<head>4 <meta charset="utf-8">5 <title>DEF(kari) — Multimodal AI Creative Platform</title>6 <style>7 :root[data-theme="dark"] {8 --bg: #1a1a2e;9 --fg: #e0e0e0;10 --fg-p: #c0c0d0;11 --fg-tag: #a0a0c0;12 --h1: #ffffff;13 --h2: #9db4ff;14 --a: #6c9bff;15 --btn-bg: #4a6cf7;16 --btn-hover: #3a5ce7;17 --border: #333;18 --th-bg: #2a2a4e;19 --note-bg: #2a2a3e;20 --caption: #808090;21 --copyright: #606080;22 --toggle-bg: #2a2a4e;23 --toggle-fg: #9db4ff;24 }25 :root[data-theme="light"] {26 --bg: #f5f5f8;27 --fg: #1a1a2e;28 --fg-p: #2c2c44;29 --fg-tag: #5a5a80;30 --h1: #0d0d1a;31 --h2: #2a4abd;32 --a: #2a4abd;33 --btn-bg: #4a6cf7;34 --btn-hover: #3a5ce7;35 --border: #c8c8d8;36 --th-bg: #dde0f5;37 --note-bg: #e8eaf8;38 --caption: #707090;39 --copyright: #9090b0;40 --toggle-bg: #dde0f5;41 --toggle-fg: #2a4abd;42 }43 @media (prefers-color-scheme: light) {44 :root:not([data-theme]) { --bg: #f5f5f8; --fg: #1a1a2e; --fg-p: #2c2c44; --fg-tag: #5a5a80; --h1: #0d0d1a; --h2: #2a4abd; --a: #2a4abd; --btn-bg: #4a6cf7; --btn-hover: #3a5ce7; --border: #c8c8d8; --th-bg: #dde0f5; --note-bg: #e8eaf8; --caption: #707090; --copyright: #9090b0; --toggle-bg: #dde0f5; --toggle-fg: #2a4abd; }45 }46 47 body { font-family: 'Segoe UI', sans-serif; background: var(--bg); color: var(--fg); margin: 0; padding: 40px; transition: background 0.2s, color 0.2s; }48 .container { max-width: 800px; margin: 0 auto; }49 h1 { color: var(--h1); font-size: 2em; }50 h2 { color: var(--h2); margin-top: 30px; }51 .tagline { color: var(--fg-tag); font-style: italic; font-size: 1.1em; margin-bottom: 30px; }52 p { line-height: 1.7; color: var(--fg-p); }53 a { color: var(--a); text-decoration: none; }54 a:hover { text-decoration: underline; }55 .btn { display: inline-block; background: var(--btn-bg); color: #fff; padding: 12px 30px; border-radius: 6px; font-size: 1.1em; margin: 10px 5px; }56 .btn:hover { background: var(--btn-hover); text-decoration: none; }57 ul { line-height: 2; }58 table { border-collapse: collapse; width: 100%; margin: 15px 0; }59 th, td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; color: var(--fg-p); }60 th { background: var(--th-bg); color: var(--fg); }61 .note { background: var(--note-bg); border-left: 3px solid var(--a); padding: 15px; margin: 20px 0; color: var(--fg-p); }62 .screenshots { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 20px 0; }63 .screenshots img { width: 100%; border-radius: 4px; border: 1px solid var(--border); }64 .screenshots .caption { text-align: center; color: var(--caption); font-size: 0.85em; margin-top: 5px; }65 66 .theme-toggle {67 position: fixed; top: 16px; right: 20px;68 background: var(--toggle-bg); color: var(--toggle-fg);69 border: 1px solid var(--border); border-radius: 20px;70 padding: 6px 14px; font-size: 0.85em; cursor: pointer;71 transition: background 0.2s;72 }73 .theme-toggle:hover { opacity: 0.8; }74 </style>75</head>76<body>77 <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn">🌙 Dark</button>78 79 <div class="container">80 <h1>🎭 DEF(kari) — Persistent Character Platform</h1>81 <p class="tagline">Dialogue × Emotion × Fable<br>With your characters, for years to come, wherever you go.</p>82 83 <p>DEF(kari) is a local-first AI creative platform that integrates text, voice, and image generation.</p>84 85 <p>Rather than entrusting your creative content to cloud service terms and content policies, DEF(kari) provides the foundation for generating and sustaining the characters and stories you desire, in your own environment, with your own hands.</p>86 87 <h2>No GPU? You can still get started.</h2>88 <p>DEF is local-first, but you don't need a local environment to begin. Using external APIs (Gemini / OpenAI / Anthropic), text generation and voice synthesis work without a GPU. Image generation requires a T2I API (OpenAI DALL-E / Civitai / Hugging Face) or a local GPU environment. Once your local setup is ready, switch to fully offline operation at any time.</p>89 90 <p>91 <a href="https://github.com/AliceBlueCode/DEF" target="_blank" class="btn">GitHub Repository</a>92 </p>93 94 <h2>Screenshots</h2>95 <div class="screenshots">96 <div>97 <img src="https://raw.githubusercontent.com/AliceBlueCode/DEF/main/docs/images/chat.png" alt="Chat Mode">98 <div class="caption">Chat Mode</div>99 </div>100 <div>101 <img src="https://raw.githubusercontent.com/AliceBlueCode/DEF/main/docs/images/session.png" alt="Session Mode">102 <div class="caption">Session Mode</div>103 </div>104 <div>105 <img src="https://raw.githubusercontent.com/AliceBlueCode/DEF/main/docs/images/novel.png" alt="Novel Mode">106 <div class="caption">Novel Mode</div>107 </div>108 <div>109 <img src="https://raw.githubusercontent.com/AliceBlueCode/DEF/main/docs/images/trpg_setup.png" alt="TRPG Mode — Session Setup">110 <div class="caption">TRPG Mode — Session Setup</div>111 </div>112 <div>113 <img src="https://raw.githubusercontent.com/AliceBlueCode/DEF/main/docs/images/trpg_session.png" alt="TRPG Mode — Session in Progress">114 <div class="caption">TRPG Mode — Session in Progress</div>115 </div>116 <div>117 <img src="https://raw.githubusercontent.com/AliceBlueCode/DEF/main/docs/images/character.png" alt="Character">118 <div class="caption">Character</div>119 </div>120 </div>121 122 <h2>Key Features</h2>123 <ul>124 <li><strong>Local-First</strong> — LLM, TTS, T2I all run locally. External API fallback supported</li>125 <li><strong>No GPU required to start</strong> — Text + voice via external APIs. Switch to local GPU anytime</li>126 <li><strong>3-Modality Integration</strong> — Text, voice, and image as a continuous creative experience</li>127 <li><strong>4 Modes</strong> — Chat / Session / TRPG / Novel</li>128 <li><strong>Character Persistence</strong> — Resume from where you left off</li>129 <li><strong>Adapter Pattern</strong> — 5 LLM, 5 TTS, 5 T2I backends</li>130 <li><strong>OpenAI-Compatible API</strong> — Connect any compatible service: LM Studio, vLLM, llama.cpp, Groq, OpenRouter, and more</li>131 <li><strong>Zoning</strong> — Public / Private data separation</li>132 </ul>133 134 <h2>Backend Support</h2>135 <table>136 <tr><th>Layer</th><th>Local (GPU)</th><th>External API (no GPU)</th></tr>137 <tr><td>LLM (text)</td><td>Text Generation WebUI / Ollama</td><td>Gemini API / OpenAI API / Anthropic Claude API / Groq / Grok / OpenRouter</td></tr>138 <tr><td>TTS (voice)</td><td>VOICEVOX / Kokoro TTS / Irodori-TTS</td><td>Gemini TTS API / OpenAI TTS API / Grok TTS</td></tr>139 <tr><td>T2I (image)</td><td>Automatic1111 / ComfyUI</td><td>OpenAI DALL-E API / Civitai API / Hugging Face API</td></tr>140 </table>141 142 <div class="note">143 <strong>Note:</strong> DEF(kari) is designed to run on your local machine, not as a Hugging Face Space application. Visit the GitHub repository for installation, documentation, and user guide (JP/EN).144 </div>145 146 <h2>Tech Stack</h2>147 <p>Python / FastAPI / React (TypeScript) / AGPL v3</p>148 149 <p style="margin-top: 40px; color: var(--copyright); font-size: 0.9em;">Copyright (C) 2026 AliceBlueCode</p>150 </div>151 152 <script>153 function toggleTheme() {154 const html = document.documentElement;155 const btn = document.getElementById('themeBtn');156 if (html.dataset.theme === 'dark') {157 html.dataset.theme = 'light';158 btn.textContent = '🌙 Dark';159 } else {160 html.dataset.theme = 'dark';161 btn.textContent = '☀️ Light';162 }163 }164 </script>165</body>166</html>167