modxai.github.io/index.html at main · ModxAI/modxai.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Dynamic Title & Description (updated by JS) -->
    <title>ModxAI Studio - Local AI Workstation</title>
    <meta name="description" id="meta-description" content="ModxAI Studio - A local-first AI workstation for individuals and small teams. Integrates chat, model management, data processing, training, and Stable Diffusion image/video generation in one desktop app.">

    <!-- SEO Meta Tags -->
    <meta name="keywords" content="ModxAI, AI Studio, Local AI, LLM, Large Language Model, Stable Diffusion, AI Chat, Model Training, LoRA, GGUF, Text to Speech, TTS, RAG, AI Workstation, Local LLM, Offline AI, AI Desktop App, Machine Learning, Deep Learning, AI Tools">
    <meta name="author" content="ModxAI">
    <meta name="robots" content="index, follow">

    <!-- Open Graph / Social Media -->
    <meta property="og:type" content="website">
    <meta property="og:title" id="og-title" content="ModxAI Studio - Local AI Workstation">
    <meta property="og:description" id="og-description" content="Local-first AI workstation with chat, model management, training, and Stable Diffusion generation.">
    <meta property="og:image" content="assets/images/chat.webp">
    <meta property="og:url" content="https://modxai.github.io">
    <meta property="og:site_name" content="ModxAI Studio">

    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" id="twitter-title" content="ModxAI Studio - Local AI Workstation">
    <meta name="twitter:description" id="twitter-description" content="Local-first AI workstation with chat, model management, training, and Stable Diffusion generation.">
    <meta name="twitter:image" content="assets/images/chat.webp">

    <!-- Alternate Languages for SEO -->
    <link rel="alternate" hreflang="en" href="https://modxai.github.io/?lang=en">
    <link rel="alternate" hreflang="zh" href="https://modxai.github.io/?lang=zh">
    <link rel="alternate" hreflang="x-default" href="https://modxai.github.io">

    <!-- Canonical URL -->
    <link rel="canonical" href="https://modxai.github.io">

    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>
    <!-- Top Navigation Bar -->
    <header class="top-nav">
        <div class="nav-left">
            <button class="mobile-menu-btn" onclick="toggleMobileSidebar()" aria-label="Toggle menu">
                <i class="fas fa-bars" id="mobile-menu-icon"></i>
            </button>
            <a href="index.html" class="logo">ModxAI</a>
        </div>
        <div class="nav-right">
            <a href="#" class="nav-link" data-i18n="nav.overview" onclick="showHome()">Overview</a>
            <a href="#" class="nav-link active" data-i18n="nav.docs" onclick="showDocs()">Docs</a>
            <div class="lang-switch" onclick="toggleLanguage()" title="Switch Language">
                <i class="fas fa-globe"></i>
                <span id="current-lang">English</span>
            </div>
            <div class="theme-switch" onclick="toggleTheme()" title="Switch Theme">
                <i class="fas fa-moon" id="theme-icon"></i>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <div class="main-container">
        <!-- Mobile Sidebar Overlay -->
        <div class="sidebar-overlay" id="sidebar-overlay" onclick="closeMobileSidebar()"></div>

        <!-- Left Navigation Menu -->
        <aside class="sidebar" id="sidebar">
            <nav class="sidebar-nav">
                <!-- Navigation content dynamically generated by JS -->
            </nav>
        </aside>

        <!-- Right Content Area -->
        <main class="content" id="content">
            <!-- Home Page Content -->
            <div class="home-page" id="home-page">
                <section class="hero">
                    <h1 data-i18n="home.title">ModxAI Studio</h1>
                    <p class="hero-subtitle" data-i18n="home.subtitle">Local AI All-in-One Workstation</p>
                    <p class="hero-desc" data-i18n="home.desc">Integrate chat, model management, data processing, training, and Stable Diffusion image/video generation in one desktop application, enabling everyone to easily enjoy the power of local AI.</p>
                    <div class="hero-buttons">
                        <a href="#" class="btn btn-primary" data-i18n="home.getStarted" onclick="loadDoc('getting-started/quick-start')">Quick Start</a>
                        <a href="#" class="btn btn-secondary" data-i18n="home.learnMore" onclick="loadDoc('getting-started/introduction')">Learn More</a>
                    </div>
                </section>

                <section class="features-grid">
                    <h2 data-i18n="home.coreFeatures">Core Features</h2>
                    <div class="feature-cards">
                        <div class="feature-card">
                            <div class="feature-image" onclick="openImagePreview('assets/images/chat.webp', 'AI Chat')">
                                <img src="assets/images/chat.webp" alt="AI Chat" loading="lazy">
                            </div>
                            <div class="feature-info" onclick="loadDoc('features/chat/overview')">
                                <h3 data-i18n="features.chat.title">AI Chat</h3>
                                <p data-i18n="features.chat.desc">Local large language model conversations, supporting text Q&A, code generation, multimodal image-text understanding, and RAG retrieval enhancement.</p>
                            </div>
                        </div>

                        <div class="feature-card">
                            <div class="feature-image" onclick="openImagePreview('assets/images/tts.webp', 'TTS')">
                                <img src="assets/images/tts.webp" alt="TTS" loading="lazy">
                            </div>
                            <div class="feature-info" onclick="loadDoc('features/tts/overview')">
                                <h3 data-i18n="features.tts.title">TTS Speech Synthesis</h3>
                                <p data-i18n="features.tts.desc">Local TTS text-to-speech, supporting Chinese-English bilingual, multiple voice options, and speech speed adjustment.</p>
                            </div>
                        </div>

                        <div class="feature-card">
                            <div class="feature-image" onclick="openImagePreview('assets/images/img2img.webp', 'SD Image')">
                                <img src="assets/images/img2img.webp" alt="SD Image" loading="lazy">
                            </div>
                            <div class="feature-info" onclick="loadDoc('features/sdchat/overview')">
                                <h3 data-i18n="features.sdImage.title">SD Image Generation</h3>
                                <p data-i18n="features.sdImage.desc">Stable Diffusion text-to-image and image-to-image, supporting multiple samplers and parameter configurations.</p>
                            </div>
                        </div>

                        <div class="feature-card">
                            <div class="feature-image" onclick="openImagePreview('assets/images/video.webp', 'SD Video')">
                                <img src="assets/images/video.webp" alt="SD Video" loading="lazy">
                            </div>
                            <div class="feature-info" onclick="loadDoc('features/sdchat/overview')">
                                <h3 data-i18n="features.sdVideo.title">SD Video Generation</h3>
                                <p data-i18n="features.sdVideo.desc">Supporting video generation models such as the Wan series, generating exciting video content locally.</p>
                            </div>
                        </div>

                        <div class="feature-card">
                            <div class="feature-image" onclick="openImagePreview('assets/images/model_library.webp', 'Model Library')">
                                <img src="assets/images/model_library.webp" alt="Model Library" loading="lazy">
                            </div>
                            <div class="feature-info" onclick="loadDoc('features/models/overview')">
                                <h3 data-i18n="features.models.title">Model Library</h3>
                                <p data-i18n="features.models.desc">Unified management of chat, multimodal, embedding, rerank, and SD models with one-click download and import.</p>
                            </div>
                        </div>

                        <div class="feature-card">
                            <div class="feature-image" onclick="openImagePreview('assets/images/datasets.webp', 'Datasets')">
                                <img src="assets/images/datasets.webp" alt="Datasets" loading="lazy">
                            </div>
                            <div class="feature-info" onclick="loadDoc('features/dataset/overview')">
                                <h3 data-i18n="features.dataset.title">Dataset Processing</h3>
                                <p data-i18n="features.dataset.desc">Pipeline-style data processing, generating SFT training data, building RAG knowledge bases, and audio-to-text conversion.</p>
                            </div>
                        </div>

                        <div class="feature-card">
                            <div class="feature-image" onclick="openImagePreview('assets/images/training.webp', 'Training')">
                                <img src="assets/images/training.webp" alt="Training" loading="lazy">
                            </div>
                            <div class="feature-info" onclick="loadDoc('features/training/overview')">
                                <h3 data-i18n="features.training.title">Model Training</h3>
                                <p data-i18n="features.training.desc">Complete training pipeline: prepare, monitor, evaluate, test, and package, supporting efficient LoRA fine-tuning.</p>
                            </div>
                        </div>

                        <div class="feature-card">
                            <div class="feature-image" onclick="openImagePreview('assets/images/environment_install.webp', 'Environment')">
                                <img src="assets/images/environment_install.webp" alt="Environment" loading="lazy">
                            </div>
                            <div class="feature-info" onclick="loadDoc('features/settings/environment')">
                                <h3 data-i18n="features.environment.title">Environment Setup</h3>
                                <p data-i18n="features.environment.desc">One-click environment configuration with sandboxed portable Python environment, supporting CPU/GPU solutions.</p>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="why-section">
                    <h2 data-i18n="home.whyTitle">Why Choose ModxAI Studio?</h2>
                    <div class="why-grid">
                        <div class="why-item">
                            <i class="fas fa-shield-alt"></i>
                            <h4 data-i18n="why.privacy.title">Privacy Security</h4>
                            <p data-i18n="why.privacy.desc">Data completely localized, no need to upload to cloud</p>
                        </div>
                        <div class="why-item">
                            <i class="fas fa-mouse-pointer"></i>
                            <h4 data-i18n="why.easy.title">Easy to Use</h4>
                            <p data-i18n="why.easy.desc">Graphical interface, no command line required</p>
                        </div>
                        <div class="why-item">
                            <i class="fas fa-cubes"></i>
                            <h4 data-i18n="why.allinone.title">Comprehensive Features</h4>
                            <p data-i18n="why.allinone.desc">One-stop solution for inference, training, and data processing</p>
                        </div>
                        <div class="why-item">
                            <i class="fas fa-bolt"></i>
                            <h4 data-i18n="why.efficient.title">Resource Efficient</h4>
                            <p data-i18n="why.efficient.desc">Support for quantized models, runnable on ordinary computers</p>
                        </div>
                        <div class="why-item">
                            <i class="fas fa-wifi-slash"></i>
                            <h4 data-i18n="why.offline.title">Offline Available</h4>
                            <p data-i18n="why.offline.desc">No account required, fully usable offline after download</p>
                        </div>
                        <div class="why-item">
                            <i class="fas fa-sync"></i>
                            <h4 data-i18n="why.update.title">Continuous Updates</h4>
                            <p data-i18n="why.update.desc">Keep pace with AI development, continuously adding new features</p>
                        </div>
                    </div>
                </section>
            </div>

            <!-- Documentation Content Area -->
            <div class="doc-page" id="doc-page" style="display: none;">
                <article class="doc-content" id="doc-content">
                    <!-- Markdown content rendered by JS -->
                </article>
            </div>
        </main>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <p>© 2025 Modyu Technology Co.,Ltd. All rights reserved.</p>
            <div class="footer-links">
                <a href="https://www.modxai.net/en" target="_blank">Official Site (EN)</a>
                <a href="https://www.modxai.net/zh" target="_blank">Official Site (Chinese)</a>
            </div>
        </div>
    </footer>

    <script src="js/i18n.js"></script>
    <script src="js/app.js"></script>
</body>
</html>