mirror of
https://github.com/deepseek-ai/deepseek-recipe.git
synced 2026-10-28 17:17:08 +08:00
Co-authored-by: xinchengxx <xinchengxx@deepseek.com> Co-authored-by: zhu-he <hezhu@deepseek.com>
84 lines
3.5 KiB
HTML
84 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>deepseek-recipe · Encoding & Decoding Demo</title>
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
|
<link rel="stylesheet" href="/style.css">
|
|
</head>
|
|
<body>
|
|
<header class="masthead">
|
|
<h1><span class="brand">deepseek-recipe</span></h1>
|
|
<span class="badge">Encoding & Decoding Demo</span>
|
|
</header>
|
|
|
|
<nav class="toolbar" aria-label="Mode and API format">
|
|
<div class="mode-tabs" role="tablist" aria-label="Mode">
|
|
<button id="mode-render" class="mode-tab active" type="button" data-mode="render" role="tab" aria-controls="render-panel" aria-selected="true" tabindex="0">Render</button>
|
|
<button id="mode-parse" class="mode-tab" type="button" data-mode="parse" role="tab" aria-controls="parse-panel" aria-selected="false" tabindex="-1">Parse</button>
|
|
</div>
|
|
<span class="toolbar-divider" aria-hidden="true"></span>
|
|
<div class="tabs" role="tablist" aria-label="API format">
|
|
<button class="tab" type="button" data-format="chat_completions" role="tab">Chat Completions</button>
|
|
<button class="tab" type="button" data-format="responses" role="tab">Responses</button>
|
|
<button class="tab" type="button" data-format="messages" role="tab">Messages</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<main>
|
|
<section id="render-panel" class="mode-panel" role="tabpanel" aria-labelledby="mode-render">
|
|
<div id="error" class="error" role="alert" hidden></div>
|
|
<div class="grid">
|
|
<section class="pane">
|
|
<header class="pane-header">
|
|
<div class="pane-heading">
|
|
<h2><label for="input">Request JSON</label></h2>
|
|
</div>
|
|
<div id="render-actions" class="actions">
|
|
<button id="render-prompt" class="primary" type="button" title="Render (⌘/Ctrl + Enter)">Render</button>
|
|
</div>
|
|
</header>
|
|
<textarea id="input" spellcheck="false" autocomplete="off"></textarea>
|
|
</section>
|
|
<section class="pane">
|
|
<header class="pane-header">
|
|
<h2>Rendered prompt <span id="meta" class="meta"></span></h2>
|
|
</header>
|
|
<pre id="output" class="prompt"></pre>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="parse-panel" class="mode-panel" role="tabpanel" aria-labelledby="mode-parse" hidden>
|
|
<div id="parse-error" class="error" role="alert" hidden></div>
|
|
<div class="grid">
|
|
<section class="pane">
|
|
<header class="pane-header">
|
|
<div class="pane-heading">
|
|
<h2><label for="model-output">Model output</label></h2>
|
|
</div>
|
|
<div id="parse-actions" class="actions" hidden>
|
|
<button id="parse-output" class="primary" type="button" title="Parse (⌘/Ctrl + Enter)">Parse</button>
|
|
</div>
|
|
</header>
|
|
<div class="model-editor">
|
|
<pre id="model-output-preview" aria-hidden="true"></pre>
|
|
<textarea id="model-output" spellcheck="false" autocomplete="off"></textarea>
|
|
</div>
|
|
</section>
|
|
<section class="pane">
|
|
<header class="pane-header">
|
|
<h2>Protocol response <span id="response-format" class="meta">Chat Completions</span> <span id="parse-meta" class="meta" role="status"></span></h2>
|
|
</header>
|
|
<pre id="parsed-output" class="prompt response" aria-label="Protocol response"></pre>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<div id="tip" class="tooltip" hidden></div>
|
|
<script src="/app.js"></script>
|
|
</body>
|
|
</html>
|