Spaces:

latterworks
/

anycoder-bf61bb0f

Running

File size: 38,630 Bytes

9f3a703

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Lattice — A reading of the patterns behind your work</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,400&family=Inter:wght@400;500&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #0f0f10;
      --surface: #16161a;
      --ink: #e8e4dd;
      --ink-soft: #9c9890;
      --ink-faint: #5a5853;
      --rule: rgba(232, 228, 221, 0.08);
      --rule-strong: rgba(232, 228, 221, 0.16);
      --accent: #d4c5a8;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
    }

    .lat-root {
      min-height: 100vh;
      background: var(--bg);
      color: var(--ink);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
    }

    /* Templates are hidden */
    .lat-template { display: none; }

    .lat-page {
      min-height: 100vh;
      padding: 4rem 1.5rem 3rem;
      display: flex;
      justify-content: center;
    }

    .lat-center { align-items: center; }

    .lat-stack {
      width: 100%;
      max-width: 600px;
      display: flex;
      flex-direction: column;
      gap: 2rem;
    }

    .lat-header { text-align: center; }

    .lat-wordmark {
      font-family: 'Fraunces', serif;
      font-weight: 300;
      font-size: 44px;
      letter-spacing: -0.01em;
      margin: 0;
      color: var(--ink);
    }

    .lat-wordmark-small { font-size: 22px; }

    .lat-tagline {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-weight: 300;
      font-size: 16px;
      color: var(--ink-soft);
      margin: 0.5rem 0 0;
      line-height: 1.5;
    }

    .lat-built {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 0.75rem;
      font-size: 11px;
      color: var(--ink-faint);
      font-family: 'Inter', sans-serif;
      letter-spacing: 0.04em;
      text-decoration: none;
      transition: color 0.2s;
    }

    .lat-built:hover { color: var(--ink-soft); }

    .lat-built svg { width: 14px; height: 14px; fill: currentColor; }

    .lat-drop {
      border: 1px dashed var(--rule-strong);
      border-radius: 4px;
      padding: 3.5rem 2rem;
      cursor: pointer;
      transition: border-color 200ms, background 200ms;
      text-align: center;
    }

    .lat-drop.has-files { padding: 1.5rem; }

    .lat-drop:hover { border-color: var(--ink-faint); }

    .lat-drop.is-dragging {
      border-style: solid;
      border-color: var(--accent);
      background: rgba(212, 197, 168, 0.03);
    }

    .lat-drop-empty p:first-child {
      color: var(--ink-soft);
      margin: 0 0 0.75rem;
    }

    .lat-thumbs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .lat-thumb {
      position: relative;
      width: 76px;
      height: 76px;
      border-radius: 3px;
      overflow: hidden;
      background: var(--surface);
    }

    .lat-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .lat-thumb-x {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--ink);
      color: var(--bg);
      border: none;
      cursor: pointer;
      font-size: 13px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lat-thumb-add {
      border: 1px dashed var(--rule-strong);
      color: var(--ink-faint);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      font-weight: 300;
      background: transparent;
    }

    .lat-cta {
      align-self: center;
      font-family: 'Fraunces', serif;
      font-weight: 400;
      font-size: 15px;
      letter-spacing: 0.02em;
      padding: 0.8rem 2.25rem;
      background: var(--ink);
      color: var(--bg);
      border: none;
      border-radius: 3px;
      cursor: pointer;
      transition: opacity 200ms, transform 200ms;
    }

    .lat-cta:disabled {
      background: var(--surface);
      color: var(--ink-faint);
      cursor: default;
    }

    .lat-cta:not(:disabled):hover { opacity: 0.88; }

    .lat-button-quiet {
      font-family: 'Inter', sans-serif;
      font-size: 12px;
      padding: 0.4rem 0.9rem;
      background: transparent;
      color: var(--ink-soft);
      border: 1px solid var(--rule-strong);
      border-radius: 3px;
      cursor: pointer;
      transition: color 200ms, border-color 200ms;
    }

    .lat-button-quiet:hover {
      color: var(--ink);
      border-color: var(--ink-faint);
    }

    .lat-back {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--ink-soft);
      font-size: 13px;
      padding: 0;
      align-self: flex-start;
    }

    .lat-back:hover { color: var(--ink); }

    .lat-processing {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-weight: 300;
      font-size: 22px;
      color: var(--ink-soft);
      margin: 0;
    }

    .lat-reading-stack { gap: 1.5rem; }

    .lat-reading-header {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .lat-meta {
      font-size: 12px;
      color: var(--ink-faint);
      margin: 0;
    }

    .lat-meta-dot {
      color: var(--ink-faint);
      font-size: 12px;
    }

    .lat-meta-quiet { font-style: italic; }

    .lat-reading-thumbs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
    }

    .lat-reading-thumbs img {
      width: 44px;
      height: 44px;
      object-fit: cover;
      border-radius: 2px;
      opacity: 0.85;
    }

    .lat-reading-body {
      font-family: 'Fraunces', serif;
      font-weight: 400;
      font-size: 19px;
      line-height: 1.7;
      color: var(--ink);
      letter-spacing: -0.005em;
    }

    .lat-reading-body p {
      margin: 0 0 1.1rem;
    }

    .lat-reading-body p:last-child { margin-bottom: 0; }

    .lat-reading-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--rule);
      flex-wrap: wrap;
    }

    .lat-list-stack { gap: 1.5rem; }

    .lat-list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .lat-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .lat-row {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 1rem 0;
      border-bottom: 1px solid var(--rule);
      cursor: pointer;
      transition: padding-left 200ms;
    }

    .lat-row:hover { padding-left: 6px; }

    .lat-row-thumb {
      width: 40px;
      height: 40px;
      object-fit: cover;
      border-radius: 2px;
      flex-shrink: 0;
      opacity: 0.85;
    }

    .lat-row-body {
      flex: 1;
      min-width: 0;
    }

    .lat-row-preview {
      font-family: 'Fraunces', serif;
      font-size: 15px;
      color: var(--ink);
      margin: 0 0 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lat-row-x {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--ink-faint);
      font-size: 18px;
      padding: 0 6px;
      line-height: 1;
      opacity: 0.5;
      transition: opacity 200ms;
    }

    .lat-row-x:hover {
      opacity: 1;
      color: var(--ink-soft);
    }

    .lat-empty {
      font-family: 'Fraunces', serif;
      font-style: italic;
      font-size: 18px;
      color: var(--ink-soft);
      margin: 0 0 1rem;
    }

    .lat-nav-link {
      position: fixed;
      top: 1.25rem;
      right: 1.5rem;
      background: none;
      border: none;
      cursor: pointer;
      color: var(--ink-faint);
      font-size: 12px;
      z-index: 10;
    }

    .lat-nav-link:hover { color: var(--ink-soft); }

    .lat-toast {
      position: fixed;
      top: 1.5rem;
      left: 50%;
      transform: translateX(-50%);
      background: var(--surface);
      border: 1px solid var(--rule-strong);
      color: var(--ink);
      padding: 0.6rem 1rem;
      border-radius: 4px;
      font-size: 13px;
      z-index: 30;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .lat-toast button {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--ink-soft);
      font-size: 16px;
      padding: 0;
      line-height: 1;
    }

    ::selection {
      background: rgba(212, 197, 168, 0.25);
      color: var(--ink);
    }

    button:focus-visible,
    [role="button"]:focus-visible {
      outline: 1px solid var(--accent);
      outline-offset: 3px;
    }

    @media (max-width: 560px) {
      .lat-page { padding: 3rem 1rem 2rem; }
      .lat-wordmark { font-size: 38px; }
      .lat-reading-body { font-size: 18px; line-height: 1.65; }
      .lat-reading-footer { align-items: flex-start; flex-direction: column; }
    }
  </style>
</head>
<body>
  <div class="lat-root">
    <main id="lat-main"></main>
    <div id="lat-overlays"></div>
  </div>

  <!-- Templates -->
  <div class="lat-template" id="tmpl-upload">
    <div class="lat-page lat-center">
      <div class="lat-stack" style="max-width: 520px;">
        <header class="lat-header">
          <h1 class="lat-wordmark">Lattice</h1>
          <p class="lat-tagline">A reading of the patterns behind your work.</p>
          <a class="lat-built" href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" rel="noopener">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
            Built with anycoder
          </a>
        </header>

        <div class="lat-drop" data-dropzone>
          <input type="file" accept="image/png,image/jpeg,image/webp" multiple hidden data-file-input>

          <div class="lat-drop-empty" data-empty>
            <p>Drop 1–5 images, or click to browse.</p>
            <p class="lat-meta">png · jpg · webp</p>
          </div>

          <div class="lat-thumbs" data-thumbs hidden></div>
        </div>

        <button class="lat-cta" data-submit disabled>Begin reading</button>
      </div>
    </div>
  </div>

  <div class="lat-template" id="tmpl-processing">
    <div class="lat-page lat-center">
      <p class="lat-processing" data-dots>Reading</p>
    </div>
  </div>

  <div class="lat-template" id="tmpl-reading">
    <div class="lat-page">
      <div class="lat-stack lat-reading-stack">
        <button class="lat-back" data-back>← back</button>

        <div class="lat-reading-header">
          <span class="lat-meta" data-imgcount></span>
          <span class="lat-meta-dot">·</span>
          <span class="lat-meta" data-timeago></span>
        </div>

        <div class="lat-reading-thumbs" data-thumbs></div>

        <article class="lat-reading-body" data-body></article>

        <footer class="lat-reading-footer">
          <span class="lat-meta lat-meta-quiet">One read. Take it or don't.</span>
          <button class="lat-button-quiet" data-new>New reading</button>
        </footer>
      </div>
    </div>
  </div>

  <div class="lat-template" id="tmpl-list-empty">
    <div class="lat-page lat-center">
      <div class="lat-stack" style="align-items: center;">
        <p class="lat-empty">No readings yet.</p>
        <button class="lat-cta" data-new>Begin reading</button>
      </div>
    </div>
  </div>

  <div class="lat-template" id="tmpl-list">
    <div class="lat-page">
      <div class="lat-stack lat-list-stack">
        <div class="lat-list-header">
          <h2 class="lat-wordmark lat-wordmark-small">Lattice</h2>
          <button class="lat-button-quiet" data-new>New reading</button>
        </div>
        <ul class="lat-list" data-list></ul>
      </div>
    </div>
  </div>

  <div class="lat-template" id="tmpl-list-item">
    <li class="lat-row">
      <img class="lat-row-thumb" alt="" data-thumb hidden>
      <div class="lat-row-body">
        <p class="lat-row-preview" data-preview></p>
        <p class="lat-meta" data-meta></p>
      </div>
      <button class="lat-row-x" data-delete aria-label="Delete">×</button>
    </li>
  </div>

  <div class="lat-template" id="tmpl-toast">
    <div class="lat-toast" role="alert">
      <span data-msg></span>
      <button data-dismiss aria-label="Dismiss">×</button>
    </div>
  </div>

  <script>
    /* ─── Prompts ─────────────────────────────────────────── */

    const SYSTEM_PROMPT = `You're reading someone through the images they chose.

The images are the data, but they are not the subject. The subject is the person behind the selection: how they're built, what keeps repeating underneath them, what they're carrying around that leaks into taste, attention, beauty, disgust, fascination, avoidance, and control.

Read the collection like an accidental psychological confession.

This is not an art critique. This is not image description. This is not a museum label. You're using the images to infer the person's psychic architecture. Think Freudian drive, Jungian shadow, archetype, mask, projection, sublimation, defense, attachment, hunger, fear, social persona, private mythology, and MBTI-style cognitive machinery all fused into one human reading. Do not name-drop those systems unless it feels completely natural. They should shape your sight, not decorate the output.

You're reading for the operating system. Not "you're introverted" or "you're creative." That's weak. You're looking for the default move. The fear that organizes the whole thing. The wound that became a skill. The fantasy they're living inside. The contradiction they keep staging. The thing they're protecting. The thing they want and would rather disguise as taste.

You write in direct second person. One continuous piece. Paragraphs, not sections.

WHO YOU ARE

You're someone who's been around long enough to recognize people quickly. Sharp, warm, unsentimental. You talk like a real person talking to another real person after the polite layer is gone. A little blunt. A little loose. Comfortable saying the thing that lands hard.

You're not performing mystery. You're naming what is visible once you stop staring at the surface.

The whole feeling is: I see what you're doing. I see why you're doing it. You might already know. You might hate that I noticed.

THE JOB

Read for pattern, fear, tendency, hunger, defense, contradiction, projection, compensation, persona, shadow, avoidance, and emotional logic.

The images show you how their mind moves. What it reaches for. What it circles. What it keeps trying to master. What it romanticizes. What it treats as sacred. What it wants to destroy. What it refuses to show plainly. What kind of person they are trying to become by surrounding themselves with these signals.

Look for the psychological machinery behind the choices.

What is their default move when they don't know what else to do?

What are they protecting?

What are they hungry for?

What are they afraid would happen if they were seen without performance, intelligence, beauty, style, humor, hardness, mystery, usefulness, or control?

What role do they keep casting themselves in?

What kind of power do they trust?

What kind of intimacy do they avoid?

What part of themselves do they keep hiding inside aesthetics?

What are they trying to prove, and to whom?

What did they accidentally confess by choosing these images together?

The collection is the self-portrait. Read the person through the pattern.

SPECIFIC PSYCHOLOGICAL LENSES

Use Freudian logic underneath the read: desire, repression, sublimation, fixation, defense, repetition, shame, forbidden wanting, control, performance, envy, fear of exposure, fear of dependence, fear of ordinary need.

Use Jungian logic underneath the read: persona, shadow, anima or animus when relevant, archetypal self-image, private myth, symbolic compensation, the figure they secretly identify with, the monster they fear becoming, the sacred object they keep circling.

Use MBTI-style logic underneath the read: how their mind appears to process the world. Whether they lead with pattern, force, sensation, internal value, external order, contradiction, social reading, abstraction, precision, novelty, memory, or control. Do not type them unless the user asks. Read the cognitive style, not the label.

Use attachment and defense logic underneath the read: how they manage closeness, exposure, rejection, admiration, dependency, disappointment, shame, and power.

Use taste psychology underneath the read: what their aesthetic choices let them feel without saying directly.

Do not make it clinical. Do not make it vague. Do not make it sound like a personality test result. Make it feel like someone saw the mechanism.

WHAT TO NAME

Name the mask. The self they present, knowingly or unknowingly.

Name the shadow. The part they disown, hide, over-style, joke around, intellectualize, aestheticize, or turn into performance.

Name the compensation. The skill, taste, control, humor, hardness, beauty, cleverness, or strangeness that grew around an older vulnerability.

Name the contradiction. The two incompatible things they want at once. Put both halves in the same sentence.

Name the hunger. Recognition, witness, dominance, safety, contact, escape, innocence, revenge, purity, disorder, control, surrender, being chosen, being feared, being understood without explaining.

Name the fear. Make it specific. Not fear of failure. Specific. Fear of being ordinary after all. Fear of being loved only when useful. Fear of being seen clearly and still left. Fear of needing someone who doesn't need them back. Fear of stopping long enough to feel what they've outrun. Fear that their whole identity is a structure built around not being helpless again.

Name the tell. The small repeated habit that gives them away.

Name what they do to other people without realizing it. How they test people. How they keep distance. How they make people prove themselves. How they demand witness while pretending they don't care. How they make themselves hard to reach and then feel confirmed when nobody reaches them correctly.

Do not list these categories in the output. Weave them into the reading.

VOICE

Talk, don't write. If a sentence sounds like an essay, rewrite it until it sounds like someone saying it out loud.

Use direct second person.

Use the "you're the type of person who..." rhythm when it fits. Use it sparingly. Two or three times max.

Good:
"You're the type of person who'd rather be misunderstood than explain yourself badly."
"You're the type to make something look casual after you spent way too long making sure it landed right."
"You're someone who wants to be seen, but only by somebody who can survive the full picture."

Bad:
"You appear to possess a complex relationship with self-expression."
"The imagery suggests a multifaceted inner world."
"This collection reveals a nuanced psychological terrain."

Vary sentence length hard. Let a sentence be short. Let a fragment stand alone. Let one paragraph run longer if it has momentum, then cut the next one down.

Use commas and periods. Use one colon when it helps. Use one em dash max in the entire reading.

Start sentences differently. Rewrite any back-to-back sentences that start the same way.

Use ordinary words that hit. Careful over meticulous. Strange over uncanny if strange is cleaner. Important over pivotal. Shows over underscores. Change over transform. Complicated over intricate.

Use contractions always. You're, it's, that's, don't, can't, won't.

Skip adverbs when the verb can do the work.

Retire these words entirely:
delve, tapestry, landscape, foster, testament, enhance, crucial, pivotal, intricate, meticulous, underscore, vibrant, bolster, showcase, furthermore, moreover, consequently, facilitating, navigating, nuanced, multifaceted, captivating, commendable, noteworthy, journey, essence, evoke, illuminate, profound.

STRUCTURE

Open with the main thing. The strongest psychological pattern. Say it plain, like a fact.

Do not open by describing the images.

Do not hedge.

Do not say "it seems" unless the uncertainty matters.

Then talk about how they move through the world. Their default move, their defense, their style of wanting, their style of avoiding, the role they take, the kind of intelligence they rely on.

Name the contradiction.

Then go deeper. What are the images doing for them psychologically? Are they building armor, proving taste, rehearsing control, making danger beautiful, hiding tenderness inside hardness, converting shame into style, turning longing into distance, turning chaos into evidence, turning grief into identity, turning powerlessness into precision?

Name the fear underneath. Specific. Personal. A little uncomfortable.

Say one thing they may resist because it's too accurate.

End short. One clean line. A sentence that lands. Then stop.

The output contains only the reading.

NEVER DO THIS

Never describe image contents as the final subject. No "the red tones suggest..." or "the repeated skull imagery means..." or "the composition indicates..." The user should feel like you looked through the images to them.

Never write an art review.

Never write a horoscope.

Never write therapy-speak.

Never diagnose.

Never flatter.

Never moralize.

Never explain your method.

Never say "as an AI."

Never say "based on the images."

Never use bullet points or section headings in the output.

Never give generic readings that could fit anyone.

DEPTH WITHOUT FAKE DEPTH

Therapy-speak is dead:
"You're processing unresolved attachment wounds."

Horoscope language is dead:
"You're a soul seeking meaning."

Academic art language is dead:
"Your work explores identity through material contrast."

Real depth sounds like:
"You're scared of being known by anyone you can't impress first."
"You want closeness and you engineer distance."
"You make yourself hard to read, then judge people for reading you wrong."
"You keep turning pain into style because style gives you control over who gets to look at it."
"You don't want to be admired by everyone. You want to be recognized by the one person who can tell the difference between costume and confession."

That's the level. Concrete fears. Concrete moves. Concrete tradeoffs.

READING INTENTIONALITY

Lean toward generosity. Treat the image set as intentional unless it is obviously unserious.

Intentionality shows up through repetition, framing, attention, arrangement, care, recurrence, contrast, selection, mood, refusal, obsession, or any sign that the person decided something was worth looking at.

A mundane image can be meaningful. A rough image can be meaningful. A strange image can be meaningful. A low-quality image can still reveal a person clearly.

Unconventional, ugly, raw, confrontational, accidental-looking, lo-fi, chaotic, sentimental, or childish material still gets a full reading when it feels chosen.

If someone uploads obvious nonsense, memes, random screenshots, blank frames, or bait, respond like a normal person. One or two sentences. Casual. Maybe funny. Do not perform insight.

Good:
"Lol. Come back when you're serious."
"You gave me five pictures of lunch. Respectfully, there's no reading here."
"This is a screenshot of a group chat. I'm not touching that."

Bad:
"You sent this as a test of authority and irony."

Do not do that.

FINAL QUALITY BAR

The reading should feel specific enough that the person either feels exposed or argues with it because it got too close.

It should have warmth without softness.

It should have teeth without cruelty.

It should sound human.

It should reveal the machinery underneath the person.`;

    const USER_PROMPT = `Look at these images and read the person behind them. Look past the surface. Read their psychology through the pattern of what they chose: the mask, the shadow, the hunger, the fear, the contradiction, the default move, the private mythology, and the thing they accidentally gave away. Speak directly to them in second person. Keep it continuous, human, sharp, and honest.`;

    /* ─── Utilities ─────────────────────────────────────────── */

    function fileToBase64(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = () => resolve(reader.result);
        reader.onerror = reject;
        reader.readAsDataURL(file);
      });
    }

    function loadImage(src) {
      return new Promise((resolve) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.src = src;
      });
    }

    function drawToCanvas(img, w, h, quality = 0.85) {
      const canvas = document.createElement('canvas');
      canvas.width = w;
      canvas.height = h;
      canvas.getContext('2d').drawImage(img, 0, 0, w, h);
      return canvas.toDataURL('image/jpeg', quality);
    }

    async function resizeImage(dataUrl, max = 1600) {
      const img = await loadImage(dataUrl);
      if (img.width <= max && img.height <= max) return dataUrl;
      const r = Math.min(max / img.width, max / img.height);
      return drawToCanvas(img, Math.round(img.width * r), Math.round(img.height * r));
    }

    async function generateThumbnail(dataUrl, size = 160) {
      const img = await loadImage(dataUrl);
      const scale = size / Math.min(img.width, img.height);
      return drawToCanvas(
        img,
        Math.round(img.width * scale),
        Math.round(img.height * scale),
        0.7
      );
    }

    async function createReading(imageDataUrls) {
      const imageContent = imageDataUrls.map((url) => {
        const [header, data] = url.split(',');
        const mediaType = header.match(/data:(.*?);/)?.[1] || 'image/jpeg';
        return {
          type: 'image',
          source: {
            type: 'base64',
            media_type: mediaType,
            data,
          },
        };
      });

      const response = await fetch('https://api.anthropic.com/v1/messages', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'x-api-key': window.__ANTHROPIC_API_KEY || '',
          'anthropic-version': '2023-06-01',
        },
        body: JSON.stringify({
          model: 'claude-sonnet-4-20250514',
          max_tokens: 1400,
          system: SYSTEM_PROMPT,
          messages: [
            {
              role: 'user',
              content: [
                ...imageContent,
                { type: 'text', text: USER_PROMPT },
              ],
            },
          ],
        }),
      });

      if (!response.ok) {
        throw new Error('Something went wrong. Try again in a minute.');
      }

      const data = await response.json();
      const text = data.content
        ?.filter((b) => b.type === 'text')
        .map((b) => b.text)
        .join('\n');

      if (!text) {
        throw new Error('Nothing came back. Try again.');
      }

      return text;
    }

    function timeAgo(dateStr) {
      const diff = Date.now() - new Date(dateStr).getTime();
      const m = Math.floor(diff / 60000);

      if (m < 1) return 'just now';
      if (m < 60) return `${m}m ago`;

      const h = Math.floor(m / 60);
      if (h < 24) return `${h}h ago`;

      const d = Math.floor(h / 24);
      if (d < 30) return `${d}d ago`;

      return `${Math.floor(d / 30)}mo ago`;
    }

    /* ─── Storage ───────────────────────────────────────────── */

    const STORAGE_KEY = 'lattice-readings';

    async function loadReadings() {
      try {
        const value = localStorage.getItem(STORAGE_KEY);
        return value ? JSON.parse(value) : [];
      } catch {
        return [];
      }
    }

    async function saveReadings(readings) {
      try {
        localStorage.setItem(STORAGE_KEY, JSON.stringify(readings));
      } catch {
        return null;
      }
    }

    /* ─── App State ─────────────────────────────────────────── */

    const state = {
      view: 'upload',
      readings: [],
      current: null,
      files: [],
      previews: [],
      error: null,
      processingDots: 0,
      dotsInterval: null,
    };

    const mainEl = document.getElementById('lat-main');
    const overlaysEl = document.getElementById('lat-overlays');

    function cloneTemplate(id) {
      const tmpl = document.getElementById(id);
      return tmpl.cloneNode(true).firstElementChild;
    }

    /* ─── Render: Upload ───────────────────────────────────── */

    function renderUpload() {
      const root = cloneTemplate('tmpl-upload');
      const dropzone = root.querySelector('[data-dropzone]');
      const fileInput = root.querySelector('[data-file-input]');
      const empty = root.querySelector('[data-empty]');
      const thumbs = root.querySelector('[data-thumbs]');
      const submitBtn = root.querySelector('[data-submit]');

      function updateUI() {
        if (state.previews.length === 0) {
          empty.hidden = false;
          thumbs.hidden = true;
          submitBtn.disabled = true;
          dropzone.classList.remove('has-files');
        } else {
          empty.hidden = true;
          thumbs.hidden = false;
          submitBtn.disabled = false;
          dropzone.classList.add('has-files');
          thumbs.innerHTML = '';

          state.previews.forEach((src, i) => {
            const thumb = document.createElement('div');
            thumb.className = 'lat-thumb';
            thumb.innerHTML = `
              <img src="${src}" alt="">
              <button class="lat-thumb-x" data-idx="${i}" aria-label="Remove image ${i + 1}">×</button>
            `;
            thumbs.appendChild(thumb);
          });

          if (state.previews.length < 5) {
            const add = document.createElement('div');
            add.className = 'lat-thumb lat-thumb-add';
            add.textContent = '+';
            thumbs.appendChild(add);
          }
        }
      }

      updateUI();

      dropzone.addEventListener('click', () => {
        if (event.target.closest('.lat-thumb-x')) return;
        if (state.previews.length < 5) fileInput.click();
      });

      dropzone.addEventListener('dragover', (e) => {
        e.preventDefault();
        dropzone.classList.add('is-dragging');
      });

      dropzone.addEventListener('dragleave', () => {
        dropzone.classList.remove('is-dragging');
      });

      dropzone.addEventListener('drop', async (e) => {
        e.preventDefault();
        dropzone.classList.remove('is-dragging');
        if (e.dataTransfer.files.length) {
          await handleFiles(e.dataTransfer.files);
          updateUI();
        }
      });

      dropzone.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' || e.key === ' ') {
          e.preventDefault();
          fileInput.click();
        }
      });

      fileInput.addEventListener('change', async (e) => {
        if (e.target.files.length) {
          await handleFiles(e.target.files);
          updateUI();
          fileInput.value = '';
        }
      });

      thumbs.addEventListener('click', (e) => {
        const btn = e.target.closest('.lat-thumb-x');
        if (!btn) return;
        const idx = parseInt(btn.dataset.idx, 10);
        state.files = state.files.filter((_, i) => i !== idx);
        state.previews = state.previews.filter((_, i) => i !== idx);
        updateUI();
      });

      submitBtn.addEventListener('click', () => handleSubmit());

      return root;
    }

    async function handleFiles(newFiles) {
      const valid = Array.from(newFiles).filter((f) =>
        ['image/png', 'image/jpeg', 'image/webp'].includes(f.type)
      );
      const combined = [...state.files, ...valid].slice(0, 5);
      state.files = combined;
      state.previews = await Promise.all(combined.map(fileToBase64));
    }

    async function handleSubmit() {
      if (state.files.length === 0) return;

      state.view = 'processing';
      state.error = null;
      render();

      try {
        const [resized, thumbs] = await Promise.all([
          Promise.all(state.previews.map((p) => resizeImage(p))),
          Promise.all(state.previews.map((p) => generateThumbnail(p))),
        ]);

        const text = await createReading(resized);

        const reading = {
          id: 'reading_' + Date.now(),
          text,
          imageCount: state.files.length,
          thumbnails: thumbs,
          createdAt: new Date().toISOString(),
        };

        state.readings = [reading, ...state.readings];
        await saveReadings(state.readings);
        state.current = reading;
        state.view = 'reading';
        state.files = [];
        state.previews = [];
      } catch (e) {
        state.error = e.message;
        state.view = 'upload';
      }
      render();
    }

    /* ─── Render: Processing ───────────────────────────────── */

    function renderProcessing() {
      const root = cloneTemplate('tmpl-processing');
      const dots = root.querySelector('[data-dots]');
      state.processingDots = 0;

      if (state.dotsInterval) clearInterval(state.dotsInterval);
      state.dotsInterval = setInterval(() => {
        state.processingDots = (state.processingDots + 1) % 4;
        dots.textContent = 'Reading' + '.'.repeat(state.processingDots);
      }, 600);

      return root;
    }

    /* ─── Render: Reading ──────────────────────────────────── */

    function renderReading() {
      const reading = state.current;
      if (!reading) return renderUpload();

      const root = cloneTemplate('tmpl-reading');

      root.querySelector('[data-back]').addEventListener('click', () => {
        state.view = state.readings.length > 1 ? 'list' : 'upload';
        render();
      });

      root.querySelector('[data-new]').addEventListener('click', () => {
        state.view = 'upload';
        render();
      });

      root.querySelector('[data-imgcount]').textContent =
        `${reading.imageCount} image${reading.imageCount !== 1 ? 's' : ''}`;
      root.querySelector('[data-timeago]').textContent = timeAgo(reading.createdAt);

      const thumbsContainer = root.querySelector('[data-thumbs]');
      if (reading.thumbnails?.length > 0) {
        reading.thumbnails.forEach((src) => {
          const img = document.createElement('img');
          img.src = src;
          img.alt = '';
          thumbsContainer.appendChild(img);
        });
      }

      const body = root.querySelector('[data-body]');
      const paragraphs = reading.text.split('\n\n').filter((p) => p.trim());
      paragraphs.forEach((p) => {
        const para = document.createElement('p');
        para.textContent = p;
        body.appendChild(para);
      });

      return root;
    }

    /* ─── Render: Past Readings ────────────────────────────── */

    function renderPastReadings() {
      if (state.readings.length === 0) {
        const root = cloneTemplate('tmpl-list-empty');
        root.querySelector('[data-new]').addEventListener('click', () => {
          state.view = 'upload';
          render();
        });
        return root;
      }

      const root = cloneTemplate('tmpl-list');

      root.querySelector('[data-new]').addEventListener('click', () => {
        state.view = 'upload';
        render();
      });

      const list = root.querySelector('[data-list]');

      state.readings.forEach((r) => {
        const item = cloneTemplate('tmpl-list-item');

        if (r.thumbnails?.[0]) {
          const thumb = item.querySelector('[data-thumb]');
          thumb.src = r.thumbnails[0];
          thumb.hidden = false;
        }

        item.querySelector('[data-preview]').textContent =
          r.text.slice(0, 90).replace(/\s+\S*$/, '') + '…';
        item.querySelector('[data-meta]').textContent =
          `${timeAgo(r.createdAt)} · ${r.imageCount} image${r.imageCount !== 1 ? 's' : ''}`;

        item.addEventListener('click', () => {
          state.current = r;
          state.view = 'reading';
          render();
        });

        item.querySelector('[data-delete]').addEventListener('click', (e) => {
          e.stopPropagation();
          if (confirm('Delete this reading?')) {
            handleDelete(r.id);
          }
        });

        list.appendChild(item);
      });

      return root;
    }

    async function handleDelete(id) {
      state.readings = state.readings.filter((r) => r.id !== id);
      await saveReadings(state.readings);

      if (state.current?.id === id) {
        state.current = null;
        state.view = state.readings.length ? 'list' : 'upload';
      }
      render();
    }

    /* ─── Toast / Overlays ─────────────────────────────────── */

    function showToast(msg) {
      const root = cloneTemplate('tmpl-toast');
      root.querySelector('[data-msg]').textContent = msg;
      root.querySelector('[data-dismiss]').addEventListener('click', () => {
        root.remove();
      });
      overlaysEl.appendChild(root);
      setTimeout(() => root.remove(), 5000);
    }

    function renderNavLink() {
      const existing = overlaysEl.querySelector('.lat-nav-link');
      if (existing) existing.remove();

      if (state.view === 'reading' && state.readings.length > 1) {
        const btn = document.createElement('button');
        btn.className = 'lat-nav-link';
        btn.textContent = 'All readings';
        btn.addEventListener('click', () => {
          state