index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta name="description" content="Try Valen's free decision API with text, images and videos. Yes/no, choices, and ratings with ready-to-run Python examples.">
  <meta name="color-scheme" content="light dark">
  <title>Valen API</title>
  <link rel="icon" href="./assets/valen-mark.png">
  <link rel="stylesheet" href="./style.css">
  <script type="module" src="./app.mjs"></script>
</head>
<body>
  <header class="nav"><a class="brand" href="https://valen-team.github.io/" target="_blank" rel="noreferrer"><img src="./assets/valen-mark.png" alt=""><strong>valen</strong><span>API</span></a><nav aria-label="Navigation"><a href="https://valen-team.github.io/docs/valen/api/" target="_blank" rel="noreferrer" data-i18n="docs">Documentation ↗</a><button id="language" type="button" aria-label="Switch language">中文</button><button id="theme" type="button" aria-label="Switch color theme">◐</button></nav></header>
  <main>
    <section class="intro"><span class="eyebrow" data-i18n="eyebrow">THE VALEN API PLAYGROUND</span><h1 data-i18n="title">A question. A clear decision.</h1><p data-i18n="subtitle">Bring text, an image, or a video. Get probabilities for what comes next.</p><div class="intro-meta"><span class="dot"></span><span data-i18n="free">Free API · No key needed</span><span class="divider">/</span><span data-i18n="formats">Yes / No · Choices · Rating</span></div></section>
    <div class="workspace">
      <section class="panel input-panel"><div class="panel-heading"><span class="step">01</span><h2 data-i18n="input">Your input</h2></div>
        <form id="decision-form"><fieldset id="fields">
          <div class="two-columns"><label><span data-i18n="model">Model</span><select id="model"><option value="valen-2b">Valen 2B</option><option value="valen-4b">Valen 4B</option><option value="valen-0-8b">Valen 0.8B</option><option value="valen-preview-0923">Valen Preview</option></select></label><label><span data-i18n="task">Output</span><select id="mode"><option value="predicate" data-i18n="predicate">Yes / No</option><option value="choice" data-i18n="choice">Choices</option><option value="score" data-i18n="score">Rating</option></select></label></div>
          <label><span data-i18n="question">Question</span><textarea id="question" maxlength="1000" rows="2" required data-placeholder="questionPlaceholder" placeholder="What would you like Valen to decide?"></textarea></label>
          <label><span data-i18n="context">Context <small>optional</small></span><textarea id="context" maxlength="4000" rows="3" data-placeholder="contextPlaceholder" placeholder="Paste the text to assess, or add some context…"></textarea></label>
          <label id="options-field" hidden><span id="options-label">Choices · one per line</span><textarea id="options" rows="4" placeholder="Option A&#10;Option B"></textarea><small data-i18n="optionsHint">2–8 entries, up to 300 characters each.</small></label>
          <div class="attachment"><label class="upload-label" for="image"><span class="upload-icon">＋</span><span><strong data-i18n="attach">Add an image or video</strong><small data-i18n="imageHint">Images up to 3 MB · MP4 / WebM up to 20 MB</small></span></label><input id="image" type="file" accept="image/jpeg,image/png,image/webp,video/mp4,video/webm"><div id="image-preview" hidden><img id="thumbnail" alt="Selected image"><span id="image-name"></span><button id="remove-image" type="button" data-i18n="remove">Remove</button></div><video id="video-preview" controls playsinline preload="metadata" hidden></video><p id="video-note" class="note" data-i18n="videoNote" hidden>Only the middle frame is sent to the model.</p></div>
          <button id="submit" class="primary" type="submit"><span data-i18n="submit">Ask Valen</span><span aria-hidden="true">↗</span></button>
        </fieldset></form>
        <button id="cancel" class="cancel" type="button" hidden data-i18n="cancel">Cancel request</button>
        <p class="privacy" data-i18n="privacy">On submit, your input is sent directly to the Valen API.</p>
      </section>
      <section class="panel output-panel"><div class="panel-heading"><span class="step">02</span><h2 data-i18n="result">Decision</h2><span id="state-badge" class="badge" data-state="ready">Ready</span></div>
        <div id="status" role="status" aria-live="polite"></div>
        <div id="empty"><div class="empty-mark">V</div><h3 data-i18n="emptyTitle">Small input. Useful signal.</h3><p data-i18n="emptyText">Your result and probability distribution will appear here.</p></div>
        <div id="answer" hidden><h3 id="decision-title"></h3><div id="probabilities"></div><p id="score-note" class="note" hidden data-i18n="scoreNote">Rating is the probability-weighted level index, starting at 0. Five levels span 0–4.</p><p id="confidence" class="note"></p><p id="model-id" class="model-id"></p><details><summary data-i18n="raw">Response JSON</summary><pre id="response-json"></pre></details></div>
        <div class="api-note"><span class="mini-label">POST</span><code>/v1/decisions</code><p data-i18n="quota">Free capacity is limited. On HTTP 429, wait at least one minute before retrying.</p></div>
      </section>
    </div>
    <section class="examples"><div class="section-heading"><h2 data-i18n="examplesTitle">Start with a question</h2><span data-i18n="examplesNote">Loads an example. You choose when to send.</span></div><div class="example-grid"><button type="button" data-example="0"><span data-i18n="example0Tag">TEXT</span><strong data-i18n="example0Title">What does this customer need?</strong><p data-i18n="example0Text">Read a message and identify its intent.</p><i aria-hidden="true">↗</i></button><button type="button" data-example="1"><span data-i18n="example1Tag">IMAGE</span><img class="example-image" src="./cookbook/sheep.jpg" alt="" loading="lazy"><strong data-i18n="example1Title">What is this group called?</strong><p data-i18n="example1Text">Look at the animals and choose a name.</p><i aria-hidden="true">↗</i></button><button type="button" data-example="2"><span data-i18n="example2Tag">VIDEO</span><img class="example-image" src="./cookbook/momos-frame.jpg" alt="" loading="lazy"><strong data-i18n="example2Title">What color is the sauce?</strong><p data-i18n="example2Text">Decide from the middle frame of a video.</p><i aria-hidden="true">↗</i></button></div></section>
    <section class="code-section"><details id="code-details"><summary><span data-i18n="codeTitle">Make it your own · API example</span><span class="code-tag">PYTHON</span></summary><p data-i18n="codeNote">Code follows your current input. Generating a preview does not call the API.</p><div class="code-actions"><button id="preview-code" type="button" data-i18n="preview">Update preview</button><button id="copy-code" type="button" data-i18n="copy">Copy Python</button><span id="copy-status" role="status"></span></div><pre><code id="python-code"></code></pre><details><summary data-i18n="requestPreview">Request JSON · image data omitted</summary><pre id="request-json"></pre></details></details></section>
    <footer><span>© 2026 Valen Team / 万澜</span><p data-i18n="network">Your browser connects directly to api.valen-team.workers.dev. This Space uses the same API as the website.</p><a href="https://huggingface.co/spaces/Valen-Team/Valen-API/tree/main" target="_blank" rel="noreferrer" data-i18n="source">View source ↗</a></footer>
  </main>
</body>
</html>