Blame for space/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="Forecast an event with Vaticinus. Choose a model, connect OpenRouter, and get a probability with the reasoning behind it.">
  <meta name="theme-color" content="#f4f0e8"><title>Vaticinus | Forecast</title>
  <link rel="stylesheet" href="/style.css"><script type="module" src="/app.js"></script>
</head>
<body>
<a class="skip-link" href="#forecast-question">Skip to question</a>
<header><a class="wordmark" href="https://vaticinus.com" target="_blank" rel="noopener noreferrer">Vaticinus<span>.</span></a><a href="https://github.com/vaticinus/vati" target="_blank" rel="noopener noreferrer">Source code</a></header>
<main>
  <h1>Forecast an event.</h1>
  <p class="intro">Ask a yes-or-no question. Get a probability and the reasoning behind it.</p>
  <form id="forecast-form" method="post">
    <label for="forecast-question">Question</label>
    <textarea id="forecast-question" rows="3" maxlength="1000" required placeholder="Will SpaceX land an uncrewed Starship on Mars before 2030?"></textarea>
    <div class="examples" aria-label="Example questions"><span>Try:</span><button type="button" data-example="space">Spaceflight</button><button type="button" data-example="energy">Energy</button><button type="button" data-example="policy">Policy</button></div>
    <div class="deadline"><label for="resolution-date">Deadline</label><input id="resolution-date" type="date" required></div>
    <details class="context"><summary>Add context or sources <span>(optional)</span></summary><label class="sr-only" for="evidence">Context or sources</label><textarea id="evidence" rows="4" maxlength="12000" placeholder="Paste relevant facts, dates, or excerpts. Links alone are not read."></textarea></details>
    <div class="connection">
      <label for="api-key">OpenRouter key <a href="https://openrouter.ai/settings/keys" target="_blank" rel="noopener noreferrer">Get a key</a></label>
      <div class="key-row"><input id="api-key" type="password" autocomplete="off" spellcheck="false" autocapitalize="none" maxlength="512" required placeholder="sk-or-…" aria-describedby="key-help"><button id="forget-key" type="button" class="quiet">Clear</button></div>
      <p id="key-help" class="hint">Used for this request. Not saved by this app.</p>
      <label for="model">Model</label><select id="model" required disabled><option value="">Loading models…</option></select>
      <p id="model-pricing" class="hint" role="status">Loading OpenRouter prices.</p><button id="reload-models" type="button" class="quiet" hidden>Retry</button>
    </div>
    <div class="submit-row"><button id="forecast-submit" type="submit" class="primary" disabled>Forecast</button><button id="cancel" type="button" class="quiet" hidden>Cancel</button></div>
    <p class="hint">Billed to your OpenRouter account. Uses model knowledge and any context you add; no live web search.</p>
  </form>
  <section id="output" aria-label="Forecast result" aria-busy="false" hidden>
    <div id="loading" hidden><p id="loading-status" role="status" aria-live="polite">Generating forecast…</p></div>
    <div id="result" hidden>
      <h2 id="result-question"></h2><div class="odds"><p><strong id="probability"></strong><span>Yes</span></p><p><strong id="probability-no"></strong><span>No</span></p></div>
      <p id="result-meta" class="hint"></p>
      <div id="explanation" class="explanation"></div>
      <section id="assumptions-section" hidden><h3>Assumptions</h3><ul id="assumptions"></ul></section>
      <section id="cruxes-section" hidden><h3>What could change this estimate</h3><ul id="cruxes"></ul></section>
      <div class="result-actions"><button id="copy-result" type="button" class="quiet">Copy forecast</button><button id="download" type="button" class="quiet">Download</button></div>
      <p class="hint">A model estimate, not a verified fact. Check the sources and assumptions.</p>
    </div>
    <div id="error-panel" hidden><h2>Couldn’t complete the forecast</h2><p id="error" role="alert"></p><p id="error-cost" class="hint"></p></div>
    <p id="copy-status" class="hint" role="status"></p>
  </section>
</main>
<footer><a href="https://vaticinus.com" target="_blank" rel="noopener noreferrer">vaticinus.com</a><details><summary>About this demo</summary><p>Questions and keys are sent over HTTPS through this Space to OpenRouter and your selected model provider. Temporary processing files are deleted after the request. Provider policies also apply.</p><p>Models span budget and premium options, informed by <a href="https://artificialanalysis.ai/leaderboards/models" target="_blank" rel="noopener noreferrer">Artificial Analysis</a>. Those benchmarks do not establish forecasting accuracy. Prices come from OpenRouter.</p></details></footer>
</body>
</html>