Phad Scroll Narrative

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 "Phad Scroll Narrative" 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 plots Phad epic journeys in Hindi so painters unroll; Mayura translates scenes to Gujarati.
Discipline: Visual Art (mobile storytelling art). Audience: Indian creators working in their own language.
Recipe: Sarvam-105B does the reasoning + Mayura / Sarvam-Translate as the user-facing surface.
Why this Sarvam primitive: Mayura turns mobile storytelling art in Visual Art into a 22-language artefact in one tap — Indian creators reach every regional audience without rewriting their work for each script.

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 one-tap language switcher or dual-pane view that renders the same content across Indian languages and scripts.
- 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/translate.functions.ts) — Sarvam-105B drafts, Mayura translates to 22 languages:
```ts
import { createServerFn } from "@tanstack/react-start";
import { generateText } from "ai";
import { z } from "zod";
import { sarvam } from "./sarvam.server";

const TARGETS = ["hi-IN","bn-IN","ta-IN","te-IN","kn-IN","ml-IN","mr-IN","gu-IN","pa-IN","od-IN"] as const;

/** Built during the Creative AI & Quantum Hackathon organised by StreetKode Fam during Indian Krump Festival 14 */
export const localize = createServerFn({ method: "POST" })
  .inputValidator((d) => z.object({
    brief: z.string().min(1).max(500),
    sourceLanguageCode: z.string().default("en-IN"),
    targetLanguageCodes: z.array(z.string()).default([...TARGETS]),
  }).parse(d))
  .handler(async ({ data }) => {
    // 1. BRAIN — Sarvam-105B writes the canonical version for mobile storytelling art.
    const { text: source } = await generateText({
      model: sarvam()("sarvam-105b"),
      system: `Write a 2-3 sentence mobile storytelling art artefact (caption, summary, instruction). ` +
              `Language: ${data.sourceLanguageCode}. No preamble.`,
      prompt: data.brief,
    });

    // 2. TRANSLATE — Mayura fans it out across the chosen Indian languages.
    const out = await Promise.all(data.targetLanguageCodes.map(async (code) => {
      const r = await fetch("https://api.sarvam.ai/translate", {
        method: "POST",
        headers: {
          "api-subscription-key": process.env.SARVAM_API_KEY!,
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          input: source,
          source_language_code: data.sourceLanguageCode,
          target_language_code: code,
          mode: "formal",                  // formal | modern-colloquial | classic-colloquial | code-mixed
          model: "mayura:v1",
        }),
      });
      const { translated_text } = await r.json() as { translated_text: string };
      return { code, text: translated_text };
    }));
    return { source, translations: out };
  });
```

CLIENT: input the brief once, render the source + a grid of language cards
(each showing its native script + a copy button).

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 mobile storytelling art in Visual Art.
2. The primary action (a one-tap language switcher or dual-pane view that renders the same content across Indian languages and scripts) 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.