| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title data-i18n="webui.masonry.pageTitle">Grok2API - Masonry</title> |
| <link rel="icon" href="/favicon.ico?v={{APP_VERSION}}"> |
| <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-sans/style.css" rel="stylesheet"> |
| <link href="https://cdn.jsdelivr.net/npm/geist@1.0.0/dist/fonts/geist-mono/style.css" rel="stylesheet"> |
| <link href="/static/css/app.css?v={{APP_VERSION}}" rel="stylesheet"> |
| </head> |
| <body class="webui-page"> |
| <div id="webui-header" data-active="/webui/masonry"></div> |
|
|
| <main class="webui-main webui-masonry-main"> |
| <section class="webui-masonry-shell"> |
| <header class="webui-masonry-head"> |
| <h1 class="webui-masonry-title" data-i18n="webui.masonry.title">Masonry</h1> |
| </header> |
|
|
| <section id="masonryFeed" class="webui-masonry-feed"> |
| <div id="masonryEmpty" class="webui-masonry-empty"> |
| <div class="webui-masonry-empty-card"> |
| <div class="webui-masonry-empty-title" data-i18n="webui.masonry.emptyTitle">从一句提示词开始</div> |
| <div class="webui-masonry-empty-text" data-i18n="webui.masonry.emptyText">每轮固定生成 6 张图，并持续出图直到你停止。</div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="webui-masonry-composer"> |
| <div class="webui-masonry-input-shell"> |
| <textarea |
| id="promptInput" |
| class="input webui-textarea" |
| placeholder="描述你想生成的画面，Enter 生成，Shift+Enter 换行" |
| data-i18n-placeholder="webui.masonry.promptPlaceholder" |
| ></textarea> |
| <div class="webui-masonry-toolbar"> |
| <div class="webui-masonry-controls"> |
| <div id="modeToggle" class="webui-masonry-toggle" role="tablist" data-kind="mode"> |
| <button type="button" class="webui-masonry-toggle-btn is-active" data-value="single" data-i18n="webui.masonry.modeRounds">Rounds</button> |
| <button type="button" class="webui-masonry-toggle-btn" data-value="continuous" data-i18n="webui.masonry.modeCycles">Cycles</button> |
| </div> |
| <div id="qualityToggle" class="webui-masonry-toggle" role="tablist" data-kind="quality"> |
| <button type="button" class="webui-masonry-toggle-btn is-active" data-value="speed" data-i18n="webui.masonry.qualitySpeed">Speed</button> |
| <button type="button" class="webui-masonry-toggle-btn" data-value="quality" data-i18n="webui.masonry.qualityQuality">Quality</button> |
| </div> |
| <label id="aspectRatioWrap" class="webui-masonry-ratio" data-ratio="2:3"> |
| <span class="webui-masonry-ratio-icon" aria-hidden="true"></span> |
| <select id="aspectRatioSelect" class="input"> |
| <option value="2:3" selected>2:3</option> |
| <option value="3:2">3:2</option> |
| <option value="1:1">1:1</option> |
| <option value="16:9">16:9</option> |
| <option value="9:16">9:16</option> |
| </select> |
| </label> |
| </div> |
| <div class="webui-masonry-actions"> |
| <button id="sendBtn" class="webui-primary-btn webui-masonry-send" type="button" data-i18n-aria-label="webui.masonry.generate" data-i18n-title="webui.masonry.generate"> |
| <svg viewBox="0 0 24 24" aria-hidden="true"> |
| <path d="M12 5v14"></path> |
| <path d="m6 11 6-6 6 6"></path> |
| </svg> |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
| </section> |
| </main> |
|
|
| <script src="/static/js/i18n.js?v={{APP_VERSION}}"></script> |
| <script src="/static/js/auth.js?v={{APP_VERSION}}"></script> |
| <script src="/static/js/toast.js?v={{APP_VERSION}}"></script> |
| <script src="/static/js/webui-header.js?v={{APP_VERSION}}"></script> |
| <script src="/static/js/footer.js?v={{APP_VERSION}}"></script> |
| <script src="/static/js/webui/masonry.js?v={{APP_VERSION}}"></script> |
| </body> |
| </html> |
|
|
