Image Alttext Selector

Required key.

Add this in your Lovable project under Settings → Secrets before pasting the prompt below.

Paste into a fresh Lovable project. Make sure the key above is set first. read the build strategy →

Build "Image Alttext Selector" as a ONE-SHOT Lovable build (~5 credits, no follow-ups).
Single-page TanStack Start app, one route, cut scope ruthlessly.

THIS PROMPT IS SELF-CONTAINED
Do not assume the participant knows Jev or has read any other page. TypeSafe Jev is a decision model,
not a text generator. It receives `state` plus a map of typed `questions` and returns JSON that code can
use directly. Use Choice to select exactly one defined option, Noul for a yes/no probability from 0 to 1,
and Score for a probability-weighted position across ordered levels. Keep rules, thresholds, arithmetic,
and actions in code. Use a generative model only if the product separately needs prose.

CONCEPT
An artist pastes draft accessibility notes, and Jev selects the extracted description that best identifies a particular image—or none—to use as its alt text.
Discipline: Visual Art (Art accessibility).
Jev pattern: Select, Don't Generate (pick the real value) — code extracts candidate spans/values from the source, then a Jev `choice` (with a 'none' option) selects the intended one so the app copies real text instead of generating it.
Why typed decisions: Choosing among artist-written descriptions avoids invented visual details and preserves human-approved language.

ENGINE: TypeSafe Jev (typed decisions, not text)
- Before writing code, ask the participant for `TYPESAFE_API_KEY` with Lovable's secure secret form. Never
  ask them to paste it into chat, never prefix it with `VITE_`, and never expose it to browser code.
- Put the callable server function in `src/lib/jev.functions.ts`; do not import a server-only module from UI code.
- Validate the user's input before the handler and read `process.env['TYPESAFE_API_KEY']` inside the handler.
- From the server, call:
  POST https://api.typesafe.ai/v1/systemone
  Authorization: Bearer <TYPESAFE_API_KEY>, Content-Type: application/json
  body: { "model": "jev-latest", "state": <Accessibility notes and extracted image descriptions>, "questions": QUESTIONS }
- Ask all questions in ONE request (they run in parallel and cannot see each other).
- Read Choice from `answers[id].choice`, `.probabilities`, and `.confidence`; Score from `.score`,
  `.probabilities`, `.legend`, and `.confidence`; Noul from `.noul` only (it has no separate confidence).

SERVER IMPLEMENTATION (adapt the input name and result mapping to this concept)
```ts
import { createServerFn } from "@tanstack/react-start";
import { z } from "zod";

const Input = z.object({ text: z.string().trim().min(1).max(20000) });

export const decide = createServerFn({ method: "POST" })
  .inputValidator((input: unknown) => Input.parse(input))
  .handler(async ({ data }) => {
    const apiKey = process.env['TYPESAFE_API_KEY'];
    if (!apiKey) return { ok: false as const, status: 500, message: "TYPESAFE_API_KEY is not configured." };

    const requestBody = {
      model: "jev-latest",
      state: { text: data.text },
      questions: QUESTIONS,
    };

    let response: Response | undefined;
    for (let attempt = 0; attempt < 3; attempt += 1) {
      response = await fetch("https://api.typesafe.ai/v1/systemone", {
        method: "POST",
        headers: { Authorization: `Bearer ${apiKey}`, "Content-Type": "application/json" },
        body: JSON.stringify(requestBody),
      });
      if (response.ok || (response.status !== 429 && response.status < 500)) break;
      if (attempt < 2) await new Promise((resolve) => setTimeout(resolve, 750 * 2 ** attempt));
    }

    if (!response) return { ok: false as const, status: 503, message: "Jev did not respond." };
    if (!response.ok) {
      const message = (await response.text()).slice(0, 500) || `Jev request failed (${response.status}).`;
      return { ok: false as const, status: response.status, message };
    }
    const result = await response.json();
    return { ok: true as const, answers: result.answers };
  });
```

In the page component, call `decide` with `useServerFn`, preserve the participant's input while loading or
on error, disable duplicate submissions, and render the returned typed values rather than parsing prose.

QUESTIONS (start here, refine wording if needed)
{
  "image_description": {
    "type": "choice",
    "instructions": "Which description best matches the specified image?",
    "criteria": {
      "candidate_1": "Describes the image’s visible subject and composition",
      "candidate_2": "Describes a relevant detail but not the whole image",
      "candidate_3": "Describes the artist’s intent rather than visible content",
      "none": "No candidate describes this image"
    }
  },
  "visible_content": {
    "type": "noul",
    "instructions": "Does the selected description focus on content visible in the image?",
    "criteria": {
      "true": "It describes visible content",
      "false": "It relies on unsupported intent or unrelated context"
    }
  }
}

DECISION RULES (in code, not in the model)
- choice/score: if confidence < 0.6 show a "needs review" badge instead of acting.
- noul: >= 0.75 = yes, <= 0.25 = no, otherwise "review".
- score: normalise with score / (levels - 1) before combining with weights.
- Missing or malformed answers go to review. Show safe HTTP status and message in the UI. Retry only 429/5xx,
  at most twice with increasing delay; never retry 400/401/402/403/404 and never invent results.
- If the product needs prose (a summary, a message), use Lovable AI for that text only; Jev makes the decisions.

UI
the source text with candidate spans highlighted and the selected one locked in. Include 2 sample inputs as one-click chips so the demo works instantly.
Tailwind + shadcn, editorial look, footer: "Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14".

NO database, NO auth, NO extra pages, NO tests.

BEFORE YOU FINISH
- Run the app and test both sample inputs through the real server function.
- Confirm the browser receives no API key and no fabricated fallback result.
- Confirm Choice/Score confidence and Noul probability drive the stated review rules.
- Confirm loading, success, review, empty-input, and service-error states are readable on mobile.

Reference only if needed: https://docs.typesafe.ai/api and https://docs.typesafe.ai/primitives

Market sizing.

Indicative figures for hackathon pitches — refine with your own research before raising.