Vandi Vazhi Frames

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 "Vandi Vazhi Frames" as a Sarvam AI NATIVE one-shot Lovable build. The
participant has only 5 credits — this single message must produce a working
demo with no follow-ups. Single-page TanStack Start app. Cut scope ruthlessly.

CONCEPT
Sarvam-105B decodes Tamil Madras Bashai slang so auto photographers; Sarvam Saaras v3 (STT) captures the driver's code-mixed route stories.
Discipline: Photography (transport street photography). Audience: Indian creators working in their own language.
Recipe: Sarvam-105B does the reasoning + Sarvam Saaras v3 (STT) as the user-facing surface.
Why this Sarvam primitive: Saaras v3 fits transport street photography in Photography because the user thinks and speaks in an Indian language — code-mix Hindi/English and regional accents need a model trained on Indian audio.

LOVABLE BUDGET (HARD CAP: ONE-SHOT, ~5 CREDITS TOTAL):
The participant has FIVE Lovable credits for the whole build. This prompt MUST
ship a working demo on the FIRST message with zero follow-ups. Engineer for that.
- ONE TanStack Start app, ONE route (`src/routes/index.tsx`). No extra pages, no auth, no nav.
- AT MOST TWO TanStack server functions: one that calls Sarvam-105B for the
  reasoning, one that calls the chosen Sarvam primitive (TTS / STT / Translate).
  Fold them into one if the primitive needs no upstream text generation.
- ONE client surface (a button, a mic, a prompt box, a language switcher) wired
  to those server fns.
- NO database, NO Lovable Cloud, NO auth, NO file uploads, NO extra integrations.
- NO tests, NO docs pages, NO settings screens, NO theming toggles.
- Libraries: template defaults + `ai` + `@ai-sdk/openai-compatible` + `zod`. Nothing else.
- Keep the diff small enough to land in one build pass. Cut scope before adding scope.

STACK
- TanStack Start app, the index route only.
- Sarvam AI is the ENTIRE backend. No OpenAI, no ElevenLabs, no Gemini, no
  Whisper, no Lovable AI Gateway. Every model call goes to api.sarvam.ai.
- Client surface fits the kernel: a mic button that streams the user's Indian-language speech into live captions or a clean transcript.
- Tailwind + shadcn. Editorial look: gold accent on a warm cream / deep ink
  background, generous Indian-script type (use a system stack that covers
  Devanagari, Tamil, Bengali, Telugu, etc.).
- Footer renders: "Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14".

BRAIN — Sarvam-105B via the OpenAI-compatible chat endpoint:
```ts
// src/lib/sarvam.server.ts
import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
export function sarvam() {
  return createOpenAICompatible({
    name: "sarvam",
    baseURL: "https://api.sarvam.ai/v1",
    headers: { "api-subscription-key": process.env.SARVAM_API_KEY! },
  });
}
```
Default chat model: `sarvam-105b`. Use `generateText` from `ai`. For factual
Indian-context answers, add `providerOptions: { sarvam: { wiki_grounding: true } }`.
Keep the system prompt and model call inside the server function — never call
Sarvam from the client. The model THINKS in the user's Indian language; ask it
to answer in `${languageCode}` (e.g. "hi-IN", "ta-IN").

SERVER FUNCTION (src/lib/scribe.functions.ts) — Saaras v3 transcribes, Sarvam-105B refines:
```ts
import { createServerFn } from "@tanstack/react-start";
import { generateText } from "ai";
import { z } from "zod";
import { sarvam } from "./sarvam.server";

/** Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export const transcribe = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({
    audioBase64: z.string().min(1),     // browser-recorded WAV/MP3 as base64
    languageCode: z.string().default("hi-IN"),
  }).parse(d))
  .handler(async ({ data }) => {
    // 1. STT — Saaras v3 transcribes the user's Indian-language speech.
    const fd = new FormData();
    const bin = Uint8Array.from(atob(data.audioBase64), c => c.charCodeAt(0));
    fd.append("file", new Blob([bin], { type: "audio/wav" }), "speech.wav");
    fd.append("model", "saaras:v2.5");
    fd.append("language_code", data.languageCode);
    const r = await fetch("https://api.sarvam.ai/speech-to-text", {
      method: "POST",
      headers: { "api-subscription-key": process.env.SARVAM_API_KEY! },
      body: fd,
    });
    if (!r.ok) throw new Error(`Saaras failed: ${r.status} ${await r.text()}`);
    const { transcript } = await r.json() as { transcript: string };

    // 2. BRAIN — Sarvam-105B turns the raw transcript into something useful for transport street photography.
    const { text } = await generateText({
      model: sarvam()("sarvam-105b"),
      system: `Turn the user's spoken transport street photography notes (in ${data.languageCode}) into a clean, ` +
              `actionable result IN THE SAME LANGUAGE. No English, no preamble.`,
      prompt: transcript,
    });
    return { transcript, result: text };
  });
```

CLIENT (record with MediaRecorder, send the base64 to the server fn):
```tsx
const rec = new MediaRecorder(await navigator.mediaDevices.getUserMedia({ audio: true }));
const chunks: Blob[] = [];
rec.ondataavailable = e => chunks.push(e.data);
rec.onstop = async () => {
  const blob = new Blob(chunks, { type: "audio/webm" });
  const audioBase64 = btoa(String.fromCharCode(...new Uint8Array(await blob.arrayBuffer())));
  const { transcript, result } = await transcribeFn({ data: { audioBase64, languageCode } });
  // render both in the chosen Indian script
};
```

LANGUAGE PICKER — required (Sarvam apps are Indian-language native):
Add a `<Select>` with these BCP-47 codes, labelled in their own script:
  hi-IN हिन्दी · bn-IN বাংলা · ta-IN தமிழ் · te-IN తెలుగు · kn-IN ಕನ್ನಡ ·
  ml-IN മലയാളം · mr-IN मराठी · gu-IN ગુજરાતી · pa-IN ਪੰਜਾਬੀ · od-IN ଓଡ଼ିଆ · en-IN English
Default to `hi-IN` so the demo opens in an Indian language without a click.
Pass the selected code into every Sarvam call (`target_language_code` for TTS
and Translate, `language_code` for STT, system-prompt instruction for chat).

USER FLOW (the entire app — nothing else exists)
1. Land on the page; the headline (in Hindi by default, switchable) previews
   what the demo does for transport street photography in Photography.
2. The primary action (a mic button that streams the user's Indian-language speech into live captions or a clean transcript) is one tap away; the rest of the layout supports it.
3. Sarvam-105B does the thinking, the chosen Sarvam primitive does the
   speaking / transcribing / translating, and the result stays on screen in
   the chosen Indian language so the user can retry, switch language, or share.

KEY — one secret, already provided to participants:
`SARVAM_API_KEY` from https://dashboard.sarvam.ai. Read it ONLY on the server
via `process.env.SARVAM_API_KEY`. Never prefix with `VITE_` and never expose
to the client. Sarvam's auth header is `api-subscription-key: <key>` (NOT
`Authorization: Bearer`) — both the proprietary endpoints (TTS/STT/Translate)
and the OpenAI-compatible chat endpoint accept that header.

CREDIT (must appear in UI footer AND as JSDoc on the server function):
Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14

Market sizing.

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