Spaces:

Sayedev
/

Prompta

Build error

App Files Files Community

Sayedev commited on 8 days ago

Commit

9ebfcd2

verified ·

1 Parent(s): a3b6162

Upload 59 files

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.eslintrc.json +3 -0
.gitattributes +2 -0
.gitignore +37 -0
.prettierrc +3 -0
LICENSE +21 -0
README.md +24 -0
app/(main)/layout.tsx +36 -0
app/(main)/page.tsx +250 -0
app/api/generateCode/route.ts +73 -0
app/api/og/route.tsx +34 -0
app/favicon.ico +0 -0
app/globals.css +24 -0
app/layout.tsx +47 -0
app/robots.txt +1 -0
app/share/[id]/layout.tsx +3 -0
app/share/[id]/page.tsx +52 -0
components/DarkModeToggle.tsx +47 -0
components/Footer.tsx +57 -0
components/Header.tsx +25 -0
components/ThemeProvider.tsx +48 -0
components/ThemeToggle.tsx +47 -0
components/code-viewer.css +7 -0
components/code-viewer.tsx +157 -0
components/github-icon.tsx +19 -0
components/loading-dots.module.css +69 -0
components/loading-dots.tsx +17 -0
hooks/use-scroll-to.ts +24 -0
hooks/useDarkMode.tsx +50 -0
lib/prisma.ts +10 -0
next.config.mjs +4 -0
package-lock.json +0 -0
package.json +45 -0
postcss.config.mjs +8 -0
prisma/migrations/20240808195804_first/migration.sql +13 -0
prisma/migrations/migration_lock.toml +3 -0
prisma/schema.prisma +18 -0
public/Aeonik/Aeonik-Bold.ttf +3 -0
public/Aeonik/Aeonik-Medium.ttf +0 -0
public/Aeonik/Aeonik-Regular.ttf +0 -0
public/Aeonik/AeonikFono-Bold.otf +0 -0
public/Aeonik/AeonikFono-Regular.otf +0 -0
public/Aeonik/AeonikMono-Regular.otf +0 -0
public/cssIcon.png +0 -0
public/favicon.ico +0 -0
public/halo.png +3 -0
public/logo.svg +10 -0
tailwind.config.ts +31 -0
tsconfig.json +26 -0
utils/domain.ts +10 -0
utils/shadcn-docs/avatar.tsx +12 -0

.eslintrc.json ADDED Viewed

	@@ -0,0 +1,3 @@

+{
+  "extends": "next/core-web-vitals"
+}

.gitattributes ADDED Viewed

	@@ -0,0 +1,2 @@


1	+ public/Aeonik/Aeonik-Bold.ttf filter=lfs diff=lfs merge=lfs -text
2	+ public/halo.png filter=lfs diff=lfs merge=lfs -text

.gitignore ADDED Viewed

	@@ -0,0 +1,37 @@

+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+# testing
+/coverage
+# next.js
+/.next/
+/out/
+# production
+/build
+# misc
+.DS_Store
+*.pem
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+# local env files
+.env*.local
+.env
+# vercel
+.vercel
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.prettierrc ADDED Viewed

	@@ -0,0 +1,3 @@

+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

LICENSE ADDED Viewed

	@@ -0,0 +1,21 @@

+MIT License
+Copyright (c) 2024 Hassan El Mghari
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md ADDED Viewed

	@@ -0,0 +1,24 @@

+<h1 align="center">InstantCoder</h1>
+<p align="center">
+  Generate small apps with one prompt. Powered by the Gemini API.
+</p>
+Try it in https://huggingface.co/spaces/osanseviero/InstantCoder
+This project is fully based on [llamacoder](https://github.com/Nutlope/llamacoder). Please follow [Nutlope](https://github.com/Nutlope) and give them a star.
+## Tech stack
+- [Gemini API](https://ai.google.dev/gemini-api/docs) to use Gemini 1.5 Pro, Gemini 1.5 Flash, and Gemini 2.0 Flash Experimental
+- [Sandpack](https://sandpack.codesandbox.io/) for the code sandbox
+- Next.js app router with Tailwind
+You can also experiment with Gemini in [Google AI Studio](https://aistudio.google.com/).
+## Cloning & running
+1. Clone the repo: `git clone https://github.com/osanseviero/GemCoder`
+2. Create a `.env` file and add your [Google AI Studio API key](https://aistudio.google.com/app/apikey): `GOOGLE_AI_API_KEY=`
+3. Run `npm install` and `npm run dev` to install dependencies and run locally
+**This is a personal project and not a Google official project**

app/(main)/layout.tsx ADDED Viewed

	@@ -0,0 +1,36 @@

+import Image from "next/image";
+import bgImg from "@/public/halo.png";
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+import ThemeToggle from "@/components/ThemeToggle";
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <body className="bg-brand dark:bg-dark antialiased dark:text-gray-100">
+      <div className="absolute inset-0 dark:bg-dark-radial" />
+      <div className="absolute inset-x-0 flex justify-center">
+        <Image
+          src={bgImg}
+          alt=""
+          className="w-full max-w-[1200px] mix-blend-screen dark:mix-blend-plus-lighter dark:opacity-10"
+          priority
+        />
+      </div>
+      <div className="isolate relative">
+        <div className="mx-auto flex min-h-screen max-w-7xl flex-col items-center justify-center py-2">
+          <div className="fixed right-4 top-4 z-50">
+            <ThemeToggle />
+          </div>
+          <Header />
+          {children}
+          <Footer />
+        </div>
+      </div>
+    </body>
+  );
+}

app/(main)/page.tsx ADDED Viewed

	@@ -0,0 +1,250 @@

+"use client";
+import CodeViewer from "@/components/code-viewer";
+import { useScrollTo } from "@/hooks/use-scroll-to";
+import { CheckIcon } from "@heroicons/react/16/solid";
+import { ArrowLongRightIcon, ChevronDownIcon } from "@heroicons/react/20/solid";
+import { ArrowUpOnSquareIcon } from "@heroicons/react/24/outline";
+import * as Select from "@radix-ui/react-select";
+import * as Switch from "@radix-ui/react-switch";
+import { AnimatePresence, motion } from "framer-motion";
+import { FormEvent, useEffect, useState } from "react";
+import LoadingDots from "../../components/loading-dots";
+function removeCodeFormatting(code: string): string {
+  return code.replace(/```(?:typescript|javascript|tsx)?\n([\s\S]*?)```/g, '$1').trim();
+}
+export default function Home() {
+  let [status, setStatus] = useState<
+    "initial" | "creating" | "created" | "updating" | "updated"
+  >("initial");
+  let [prompt, setPrompt] = useState("");
+  let models = [
+    {
+      label: "gemini-2.0-flash-exp",
+      value: "gemini-2.0-flash-exp",
+    },
+    {
+      label: "gemini-1.5-pro",
+      value: "gemini-1.5-pro",
+    },
+    {
+      label: "gemini-1.5-flash",
+      value: "gemini-1.5-flash",
+    }
+  ];
+  let [model, setModel] = useState(models[0].value);
+  let [modification, setModification] = useState("");
+  let [generatedCode, setGeneratedCode] = useState("");
+  let [initialAppConfig, setInitialAppConfig] = useState({
+    model: "",
+  });
+  let [ref, scrollTo] = useScrollTo();
+  let [messages, setMessages] = useState<{ role: string; content: string }[]>(
+    [],
+  );
+  let loading = status === "creating" || status === "updating";
+  async function createApp(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (status !== "initial") {
+      scrollTo({ delay: 0.5 });
+    }
+    setStatus("creating");
+    setGeneratedCode("");
+    let res = await fetch("/api/generateCode", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        model,
+        messages: [{ role: "user", content: prompt }],
+      }),
+    });
+    if (!res.ok) {
+      throw new Error(res.statusText);
+    }
+    if (!res.body) {
+      throw new Error("No response body");
+    }
+    const reader = res.body.getReader();
+    let receivedData = "";
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) {
+        break;
+      }
+      receivedData += new TextDecoder().decode(value);
+      const cleanedData = removeCodeFormatting(receivedData);
+      setGeneratedCode(cleanedData);
+    }
+    setMessages([{ role: "user", content: prompt }]);
+    setInitialAppConfig({ model });
+    setStatus("created");
+  }
+  useEffect(() => {
+    let el = document.querySelector(".cm-scroller");
+    if (el && loading) {
+      let end = el.scrollHeight - el.clientHeight;
+      el.scrollTo({ top: end });
+    }
+  }, [loading, generatedCode]);
+  return (
+    <main className="mt-12 flex w-full flex-1 flex-col items-center px-4 text-center sm:mt-1">
+      <a
+        className="mb-4 inline-flex h-7 shrink-0 items-center gap-[9px] rounded-[50px] border-[0.5px] border-solid border-[#E6E6E6] bg-[rgba(234,238,255,0.65)] dark:bg-[rgba(30,41,59,0.5)] dark:border-gray-700 px-7 py-5 shadow-[0px_1px_1px_0px_rgba(0,0,0,0.25)]"
+        href="https://ai.google.dev/gemini-api/docs"
+        target="_blank"
+      >
+        <span className="text-center">
+          Powered by <span className="font-medium">Gemini API</span>
+        </span>
+      </a>
+      <h1 className="my-6 max-w-3xl text-4xl font-bold text-gray-800 dark:text-white sm:text-6xl">
+        Turn your <span className="text-blue-600">idea</span>
+        <br /> into an <span className="text-blue-600">app</span>
+      </h1>
+      <form className="w-full max-w-xl" onSubmit={createApp}>
+        <fieldset disabled={loading} className="disabled:opacity-75">
+          <div className="relative mt-5">
+            <div className="absolute -inset-2 rounded-[32px] bg-gray-300/50 dark:bg-gray-800/50" />
+            <div className="relative flex rounded-3xl bg-white dark:bg-[#1E293B] shadow-sm">
+              <div className="relative flex flex-grow items-stretch focus-within:z-10">
+                <textarea
+                  rows={3}
+                  required
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  name="prompt"
+                  className="w-full resize-none rounded-l-3xl bg-transparent px-6 py-5 text-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500 dark:text-gray-100 dark:placeholder-gray-400"
+                  placeholder="Build me a calculator app..."
+                />
+              </div>
+              <button
+                type="submit"
+                disabled={loading}
+                className="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-3xl px-3 py-2 text-sm font-semibold text-blue-500 hover:text-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500 disabled:text-gray-900 dark:disabled:text-gray-400"
+              >
+                {status === "creating" ? (
+                  <LoadingDots color="black" style="large" />
+                ) : (
+                  <ArrowLongRightIcon className="-ml-0.5 size-6" />
+                )}
+              </button>
+            </div>
+          </div>
+          <div className="mt-6 flex flex-col justify-center gap-4 sm:flex-row sm:items-center sm:gap-8">
+            <div className="flex items-center justify-between gap-3 sm:justify-center">
+              <p className="text-gray-500 dark:text-gray-400 sm:text-xs">Model:</p>
+              <Select.Root
+                name="model"
+                disabled={loading}
+                value={model}
+                onValueChange={(value) => setModel(value)}
+              >
+                <Select.Trigger className="group flex w-60 max-w-xs items-center rounded-2xl border-[6px] border-gray-300 dark:border-gray-700 bg-white dark:bg-[#1E293B] px-4 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500">
+                  <Select.Value />
+                  <Select.Icon className="ml-auto">
+                    <ChevronDownIcon className="size-6 text-gray-300 group-focus-visible:text-gray-500 group-enabled:group-hover:text-gray-500 dark:text-gray-600 dark:group-focus-visible:text-gray-400 dark:group-enabled:group-hover:text-gray-400" />
+                  </Select.Icon>
+                </Select.Trigger>
+                <Select.Portal>
+                  <Select.Content className="overflow-hidden rounded-md bg-white dark:bg-[#1E293B] shadow-lg">
+                    <Select.Viewport className="p-2">
+                      {models.map((model) => (
+                        <Select.Item
+                          key={model.value}
+                          value={model.value}
+                          className="flex cursor-pointer items-center rounded-md px-3 py-2 text-sm data-[highlighted]:bg-gray-100 dark:data-[highlighted]:bg-gray-800 data-[highlighted]:outline-none"
+                        >
+                          <Select.ItemText asChild>
+                            <span className="inline-flex items-center gap-2 text-gray-500 dark:text-gray-400">
+                              <div className="size-2 rounded-full bg-green-500" />
+                              {model.label}
+                            </span>
+                          </Select.ItemText>
+                          <Select.ItemIndicator className="ml-auto">
+                            <CheckIcon className="size-5 text-blue-600" />
+                          </Select.ItemIndicator>
+                        </Select.Item>
+                      ))}
+                    </Select.Viewport>
+                    <Select.ScrollDownButton />
+                    <Select.Arrow />
+                  </Select.Content>
+                </Select.Portal>
+              </Select.Root>
+            </div>
+          </div>
+        </fieldset>
+      </form>
+      <hr className="border-1 mb-20 h-px bg-gray-700 dark:bg-gray-700/30" />
+      {status !== "initial" && (
+        <motion.div
+          initial={{ height: 0 }}
+          animate={{
+            height: "auto",
+            overflow: "hidden",
+            transitionEnd: { overflow: "visible" },
+          }}
+          transition={{ type: "spring", bounce: 0, duration: 0.5 }}
+          className="w-full pb-[25vh] pt-1"
+          onAnimationComplete={() => scrollTo()}
+          ref={ref}
+        >
+          <div className="relative mt-8 w-full overflow-hidden">
+            <div className="isolate">
+              <CodeViewer code={generatedCode} showEditor />
+            </div>
+            <AnimatePresence>
+              {loading && (
+                <motion.div
+                  initial={status === "updating" ? { x: "100%" } : undefined}
+                  animate={status === "updating" ? { x: "0%" } : undefined}
+                  exit={{ x: "100%" }}
+                  transition={{
+                    type: "spring",
+                    bounce: 0,
+                    duration: 0.85,
+                    delay: 0.5,
+                  }}
+                  className="absolute inset-x-0 bottom-0 top-1/2 flex items-center justify-center rounded-r border border-gray-400 dark:border-gray-700 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-[#1E293B] dark:to-gray-800 md:inset-y-0 md:left-1/2 md:right-0"
+                >
+                  <p className="animate-pulse text-3xl font-bold dark:text-gray-100">
+                    {status === "creating"
+                      ? "Building your app..."
+                      : "Updating your app..."}
+                  </p>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </motion.div>
+      )}
+    </main>
+  );
+}
+async function minDelay<T>(promise: Promise<T>, ms: number) {
+  let delay = new Promise((resolve) => setTimeout(resolve, ms));
+  let [p] = await Promise.all([promise, delay]);
+  return p;
+}

app/api/generateCode/route.ts ADDED Viewed

	@@ -0,0 +1,73 @@

+import dedent from "dedent";
+import { z } from "zod";
+import { GoogleGenerativeAI } from "@google/generative-ai";
+const apiKey = process.env.GOOGLE_AI_API_KEY || "";
+const genAI = new GoogleGenerativeAI(apiKey);
+export async function POST(req: Request) {
+  let json = await req.json();
+  let result = z
+    .object({
+      model: z.string(),
+      messages: z.array(
+        z.object({
+          role: z.enum(["user", "assistant"]),
+          content: z.string(),
+        }),
+      ),
+    })
+    .safeParse(json);
+  if (result.error) {
+    return new Response(result.error.message, { status: 422 });
+  }
+  let { model, messages } = result.data;
+  let systemPrompt = getSystemPrompt();
+  const geminiModel = genAI.getGenerativeModel({model: model});
+  const geminiStream = await geminiModel.generateContentStream(
+    messages[0].content + systemPrompt + "\nPlease ONLY return code, NO backticks or language names. Don't start with \`\`\`typescript or \`\`\`javascript or \`\`\`tsx or \`\`\`."
+  );
+  console.log(messages[0].content + systemPrompt + "\nPlease ONLY return code, NO backticks or language names. Don't start with \`\`\`typescript or \`\`\`javascript or \`\`\`tsx or \`\`\`.")
+  const readableStream = new ReadableStream({
+    async start(controller) {
+      for await (const chunk of geminiStream.stream) {
+        const chunkText = chunk.text();
+        controller.enqueue(new TextEncoder().encode(chunkText));
+      }
+      controller.close();
+    },
+  });
+  return new Response(readableStream);
+}
+function getSystemPrompt() {
+  let systemPrompt =
+`You are an expert frontend React engineer who is also a great UI/UX designer. Follow the instructions carefully, I will tip you $1 million if you do a good job:
+- Think carefully step by step.
+- Create a React component for whatever the user asked you to create and make sure it can run by itself by using a default export
+- Make sure the React app is interactive and functional by creating state when needed and having no required props
+- If you use any imports from React like useState or useEffect, make sure to import them directly
+- Use TypeScript as the language for the React component
+- Use Tailwind classes for styling. DO NOT USE ARBITRARY VALUES (e.g. \`h-[600px]\`). Make sure to use a consistent color palette.
+- Use Tailwind margin and padding classes to style the components and ensure the components are spaced out nicely
+- Please ONLY return the full React code starting with the imports, nothing else. It's very important for my job that you only return the React code with imports. DO NOT START WITH \`\`\`typescript or \`\`\`javascript or \`\`\`tsx or \`\`\`.
+- ONLY IF the user asks for a dashboard, graph or chart, the recharts library is available to be imported, e.g. \`import { LineChart, XAxis, ... } from "recharts"\` & \`<LineChart ...><XAxis dataKey="name"> ...\`. Please only use this when needed.
+- For placeholder images, please use a <div className="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
+  `;
+  systemPrompt += `
+    NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
+  `;
+  return dedent(systemPrompt);
+}
+export const runtime = "edge";

app/api/og/route.tsx ADDED Viewed

	@@ -0,0 +1,34 @@

+import { ImageResponse } from "next/og";
+import { domain } from "@/utils/domain";
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const prompt = searchParams.get("prompt");
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          backgroundImage: `url(${domain}/dynamic-og.png)`,
+          backgroundSize: "1200px 630px",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "center center",
+          fontSize: 50,
+          color: "black",
+          background: "white",
+          width: "100%",
+          height: "100%",
+          padding: "50px 200px",
+          textAlign: "center",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        {prompt && prompt.length > 100 ? prompt.slice(0, 97) + "..." : prompt}
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+    },
+  );
+}

app/favicon.ico ADDED Viewed

app/globals.css ADDED Viewed

	@@ -0,0 +1,24 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@font-face {
+  font-family: "Aeonik";
+  src: url("/Aeonik/Aeonik-Regular.ttf");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Aeonik";
+  src: url("/Aeonik/Aeonik-Medium.ttf");
+  font-weight: 500;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Aeonik";
+  src: url("/Aeonik/Aeonik-Bold.ttf");
+  font-weight: 700;
+  font-style: normal;
+}

app/layout.tsx ADDED Viewed

	@@ -0,0 +1,47 @@

+import type { Metadata } from "next";
+import "./globals.css";
+import { ThemeProvider } from "@/components/ThemeProvider";
+let title = "Gemini Coder – AI Code Generator";
+let description = "Generate your next app with Gemini";
+let url = "https://llamacoder.io/";
+let ogimage = "https://www.gstatic.com/lamda/images/gemini_sparkle_v002_d4735304ff6292a690345.svg";
+let sitename = "geminicoder.io";
+export const metadata: Metadata = {
+  metadataBase: new URL(url),
+  title,
+  description,
+  icons: {
+    icon: "/favicon.ico",
+  },
+  openGraph: {
+    images: [ogimage],
+    title,
+    description,
+    url: url,
+    siteName: sitename,
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    images: [ogimage],
+    title,
+    description,
+  },
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="h-full">
+      <ThemeProvider>
+        {children}
+      </ThemeProvider>
+    </html>
+  );
+}

app/robots.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Allow: /api/og/*

app/share/[id]/layout.tsx ADDED Viewed

	@@ -0,0 +1,3 @@

+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <body className="flex min-h-full flex-col">{children}</body>;
+}

app/share/[id]/page.tsx ADDED Viewed

	@@ -0,0 +1,52 @@

+import { notFound } from "next/navigation";
+import CodeViewer from "@/components/code-viewer";
+import client from "@/lib/prisma";
+import type { Metadata } from "next";
+import { cache } from "react";
+export async function generateMetadata({
+  params,
+}: {
+  params: { id: string };
+}): Promise<Metadata> {
+  const generatedApp = await getGeneratedAppByID(params.id);
+  let prompt = generatedApp?.prompt;
+  if (typeof prompt !== "string") {
+    notFound();
+  }
+  let searchParams = new URLSearchParams();
+  searchParams.set("prompt", prompt);
+  return {
+    title: "An app generated on LlamaCoder.io",
+    description: `Prompt: ${generatedApp?.prompt}`,
+    openGraph: {
+      images: [`/api/og?${searchParams}`],
+    },
+  };
+}
+export default async function Page({ params }: { params: { id: string } }) {
+  // if process.env.DATABASE_URL is not set, throw an error
+  if (typeof params.id !== "string") {
+    notFound();
+  }
+  const generatedApp = await getGeneratedAppByID(params.id);
+  if (!generatedApp) {
+    return <div>App not found</div>;
+  }
+  return <CodeViewer code={generatedApp.code} />;
+}
+const getGeneratedAppByID = cache(async (id: string) => {
+  return client.generatedApp.findUnique({
+    where: {
+      id,
+    },
+  });
+});

components/DarkModeToggle.tsx ADDED Viewed

	@@ -0,0 +1,47 @@

+'use client';
+import { useDarkMode } from '@/hooks/useDarkMode';
+export function DarkModeToggle() {
+  const { isDarkMode, toggleDarkMode } = useDarkMode();
+  return (
+    <button
+      onClick={toggleDarkMode}
+      className="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
+      aria-label="Toggle dark mode"
+    >
+      {isDarkMode ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-5 h-5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+          />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="w-5 h-5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}

components/Footer.tsx ADDED Viewed

	@@ -0,0 +1,57 @@

+import Link from "next/link";
+export default function Footer() {
+  return (
+    <footer className="mb-3 mt-5 flex h-16 w-full flex-col items-center justify-between space-y-3 px-3 pt-4 text-center sm:mb-0 sm:h-20 sm:flex-row sm:pt-2">
+      <div>
+        <div className="font-medium">
+          Built with{" "}
+          <a
+            href="https://ai.google.dev/gemini-api/docs"
+            className="font-semibold text-blue-600 underline-offset-4 transition hover:text-gray-700 hover:underline"
+            target="_blank"
+          >
+            Gemini API
+          </a>{" "}
+          and{" "}
+          <a
+            href="https://github.com/nutlope/llamacoder"
+            className="font-semibold text-blue-600 underline-offset-4 transition hover:text-gray-700 hover:underline"
+            target="_blank"
+          >
+            Inspired on Llamacoder
+          </a>
+          . This is not an official Google product.
+        </div>
+      </div>
+      <div className="flex space-x-4 pb-4 sm:pb-0">
+        <Link
+          href="https://twitter.com/osanseviero"
+          className="group"
+          aria-label=""
+          target="_blank"
+        >
+          <svg
+            aria-hidden="true"
+            className="h-6 w-6 fill-gray-500 group-hover:fill-gray-700"
+          >
+            <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
+          </svg>
+        </Link>
+        <Link
+          href="https://github.com/osanseviero/geminicoder"
+          className="group"
+          aria-label="TaxPal on GitHub"
+          target="_blank"
+        >
+          <svg
+            aria-hidden="true"
+            className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
+          >
+            <path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
+          </svg>
+        </Link>
+      </div>
+    </footer>
+  );
+}

components/Header.tsx ADDED Viewed

	@@ -0,0 +1,25 @@

+import Image from "next/image";
+import Link from "next/link";
+import logo from "../public/logo.svg";
+import GithubIcon from "./github-icon";
+export default function Header() {
+  return (
+    <header className="relative mx-auto mt-5 flex w-full items-center justify-center px-2 pb-7 sm:px-4">
+      <Link href="/" className="absolute flex items-center gap-2">
+        <Image alt="header text" src={logo} className="h-5 w-5" />
+        <h1 className="text-xl tracking-tight">
+          <span className="text-blue-600">Gemini</span>Coder
+        </h1>
+      </Link>
+      <a
+        href="https://github.com/osanseviero/geminicoder"
+        target="_blank"
+        className="ml-auto hidden items-center gap-3 rounded-2xl bg-white dark:bg-[#1E293B] dark:text-gray-100 px-6 py-2 sm:flex border border-gray-200 dark:border-gray-700"
+      >
+        <GithubIcon className="h-4 w-4 dark:text-gray-100" />
+        <span>GitHub Repo</span>
+      </a>
+    </header>
+  );
+}

components/ThemeProvider.tsx ADDED Viewed

	@@ -0,0 +1,48 @@

+"use client";
+import { createContext, useContext, useEffect, useState } from "react";
+type Theme = "light" | "dark";
+type ThemeContextType = {
+  theme: Theme;
+  toggleTheme: () => void;
+};
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>("light");
+  useEffect(() => {
+    const savedTheme = localStorage.getItem("theme") as Theme;
+    if (savedTheme) {
+      setTheme(savedTheme);
+      document.documentElement.classList.toggle("dark", savedTheme === "dark");
+    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      setTheme("dark");
+      document.documentElement.classList.add("dark");
+    }
+  }, []);
+  const toggleTheme = () => {
+    const newTheme = theme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+    localStorage.setItem("theme", newTheme);
+    document.documentElement.classList.toggle("dark", newTheme === "dark");
+  };
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === undefined) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}

components/ThemeToggle.tsx ADDED Viewed

	@@ -0,0 +1,47 @@

+"use client";
+import { useTheme } from "./ThemeProvider";
+export default function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+  return (
+    <button
+      onClick={toggleTheme}
+      className="flex h-8 w-8 items-center justify-center rounded-lg bg-gray-200 transition-colors hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600"
+      aria-label="Toggle dark mode"
+    >
+      {theme === "light" ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="h-5 w-5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z"
+          />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          strokeWidth={1.5}
+          stroke="currentColor"
+          className="h-5 w-5"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
+          />
+        </svg>
+      )}
+    </button>
+  );
+}

components/code-viewer.css ADDED Viewed

	@@ -0,0 +1,7 @@

+.sp-preview-container {
+  @apply flex h-full w-full grow flex-col justify-center;
+}
+.sp-preview-iframe {
+  @apply grow;
+}

components/code-viewer.tsx ADDED Viewed

	@@ -0,0 +1,157 @@

+"use client";
+import * as shadcnComponents from "@/utils/shadcn";
+import { Sandpack } from "@codesandbox/sandpack-react";
+import {
+  SandpackPreview,
+  SandpackProvider,
+} from "@codesandbox/sandpack-react/unstyled";
+import { dracula as draculaTheme } from "@codesandbox/sandpack-themes";
+import dedent from "dedent";
+import "./code-viewer.css";
+export default function CodeViewer({
+  code,
+  showEditor = false,
+}: {
+  code: string;
+  showEditor?: boolean;
+}) {
+  return showEditor ? (
+    <Sandpack
+      options={{
+        showNavigator: true,
+        editorHeight: "80vh",
+        showTabs: false,
+        ...sharedOptions,
+      }}
+      files={{
+        "App.tsx": code,
+        ...sharedFiles,
+      }}
+      {...sharedProps}
+    />
+  ) : (
+    <SandpackProvider
+      files={{
+        "App.tsx": code,
+        ...sharedFiles,
+      }}
+      className="flex h-full w-full grow flex-col justify-center"
+      options={{ ...sharedOptions }}
+      {...sharedProps}
+    >
+      <SandpackPreview
+        className="flex h-full w-full grow flex-col justify-center p-4 md:pt-16"
+        showOpenInCodeSandbox={false}
+        showRefreshButton={false}
+      />
+    </SandpackProvider>
+  );
+}
+let sharedProps = {
+  template: "react-ts",
+  theme: draculaTheme,
+  customSetup: {
+    dependencies: {
+      "lucide-react": "latest",
+      recharts: "2.9.0",
+      "react-router-dom": "latest",
+      "@radix-ui/react-accordion": "^1.2.0",
+      "@radix-ui/react-alert-dialog": "^1.1.1",
+      "@radix-ui/react-aspect-ratio": "^1.1.0",
+      "@radix-ui/react-avatar": "^1.1.0",
+      "@radix-ui/react-checkbox": "^1.1.1",
+      "@radix-ui/react-collapsible": "^1.1.0",
+      "@radix-ui/react-dialog": "^1.1.1",
+      "@radix-ui/react-dropdown-menu": "^2.1.1",
+      "@radix-ui/react-hover-card": "^1.1.1",
+      "@radix-ui/react-label": "^2.1.0",
+      "@radix-ui/react-menubar": "^1.1.1",
+      "@radix-ui/react-navigation-menu": "^1.2.0",
+      "@radix-ui/react-popover": "^1.1.1",
+      "@radix-ui/react-progress": "^1.1.0",
+      "@radix-ui/react-radio-group": "^1.2.0",
+      "@radix-ui/react-select": "^2.1.1",
+      "@radix-ui/react-separator": "^1.1.0",
+      "@radix-ui/react-slider": "^1.2.0",
+      "@radix-ui/react-slot": "^1.1.0",
+      "@radix-ui/react-switch": "^1.1.0",
+      "@radix-ui/react-tabs": "^1.1.0",
+      "@radix-ui/react-toast": "^1.2.1",
+      "@radix-ui/react-toggle": "^1.1.0",
+      "@radix-ui/react-toggle-group": "^1.1.0",
+      "@radix-ui/react-tooltip": "^1.1.2",
+      "class-variance-authority": "^0.7.0",
+      clsx: "^2.1.1",
+      "date-fns": "^3.6.0",
+      "embla-carousel-react": "^8.1.8",
+      "react-day-picker": "^8.10.1",
+      "tailwind-merge": "^2.4.0",
+      "tailwindcss-animate": "^1.0.7",
+      vaul: "^0.9.1",
+    },
+  },
+} as const;
+let sharedOptions = {
+  externalResources: [
+    "https://unpkg.com/@tailwindcss/ui/dist/tailwind-ui.min.css",
+  ],
+};
+let sharedFiles = {
+  "/lib/utils.ts": shadcnComponents.utils,
+  "/components/ui/accordion.tsx": shadcnComponents.accordian,
+  "/components/ui/alert-dialog.tsx": shadcnComponents.alertDialog,
+  "/components/ui/alert.tsx": shadcnComponents.alert,
+  "/components/ui/avatar.tsx": shadcnComponents.avatar,
+  "/components/ui/badge.tsx": shadcnComponents.badge,
+  "/components/ui/breadcrumb.tsx": shadcnComponents.breadcrumb,
+  "/components/ui/button.tsx": shadcnComponents.button,
+  "/components/ui/calendar.tsx": shadcnComponents.calendar,
+  "/components/ui/card.tsx": shadcnComponents.card,
+  "/components/ui/carousel.tsx": shadcnComponents.carousel,
+  "/components/ui/checkbox.tsx": shadcnComponents.checkbox,
+  "/components/ui/collapsible.tsx": shadcnComponents.collapsible,
+  "/components/ui/dialog.tsx": shadcnComponents.dialog,
+  "/components/ui/drawer.tsx": shadcnComponents.drawer,
+  "/components/ui/dropdown-menu.tsx": shadcnComponents.dropdownMenu,
+  "/components/ui/input.tsx": shadcnComponents.input,
+  "/components/ui/label.tsx": shadcnComponents.label,
+  "/components/ui/menubar.tsx": shadcnComponents.menuBar,
+  "/components/ui/navigation-menu.tsx": shadcnComponents.navigationMenu,
+  "/components/ui/pagination.tsx": shadcnComponents.pagination,
+  "/components/ui/popover.tsx": shadcnComponents.popover,
+  "/components/ui/progress.tsx": shadcnComponents.progress,
+  "/components/ui/radio-group.tsx": shadcnComponents.radioGroup,
+  "/components/ui/select.tsx": shadcnComponents.select,
+  "/components/ui/separator.tsx": shadcnComponents.separator,
+  "/components/ui/skeleton.tsx": shadcnComponents.skeleton,
+  "/components/ui/slider.tsx": shadcnComponents.slider,
+  "/components/ui/switch.tsx": shadcnComponents.switchComponent,
+  "/components/ui/table.tsx": shadcnComponents.table,
+  "/components/ui/tabs.tsx": shadcnComponents.tabs,
+  "/components/ui/textarea.tsx": shadcnComponents.textarea,
+  "/components/ui/toast.tsx": shadcnComponents.toast,
+  "/components/ui/toaster.tsx": shadcnComponents.toaster,
+  "/components/ui/toggle-group.tsx": shadcnComponents.toggleGroup,
+  "/components/ui/toggle.tsx": shadcnComponents.toggle,
+  "/components/ui/tooltip.tsx": shadcnComponents.tooltip,
+  "/components/ui/use-toast.tsx": shadcnComponents.useToast,
+  "/public/index.html": dedent`
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Document</title>
+        <script src="https://cdn.tailwindcss.com"></script>
+      </head>
+      <body>
+        <div id="root"></div>
+      </body>
+    </html>
+  `,
+};

components/github-icon.tsx ADDED Viewed

	@@ -0,0 +1,19 @@

+export default function GithubIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={16}
+      height={16}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 0C3.582 0 0 3.672 0 8.203c0 3.623 2.292 6.699 5.471 7.783.4.075.546-.178.546-.396 0-.194-.007-.71-.01-1.394-2.226.495-2.696-1.1-2.696-1.1-.363-.948-.888-1.2-.888-1.2-.726-.508.055-.499.055-.499.803.058 1.225.845 1.225.845.714 1.253 1.873.891 2.328.682.074-.53.28-.891.509-1.096-1.776-.207-3.644-.911-3.644-4.054 0-.895.312-1.628.823-2.201-.082-.208-.357-1.042.079-2.17 0 0 .672-.222 2.2.84A7.485 7.485 0 018 3.967c.68.003 1.364.094 2.003.276 1.527-1.062 2.198-.841 2.198-.841.437 1.129.161 1.963.08 2.17.512.574.822 1.307.822 2.202 0 3.15-1.871 3.844-3.653 4.048.288.253.543.753.543 1.519 0 1.095-.01 1.98-.01 2.25 0 .219.144.474.55.394a8.031 8.031 0 003.96-2.989A8.337 8.337 0 0016 8.203C16 3.672 12.418 0 8 0z"
+        fill="#000"
+      />
+    </svg>
+  );
+}

components/loading-dots.module.css ADDED Viewed

	@@ -0,0 +1,69 @@

+.loading {
+  display: inline-flex;
+  align-items: center;
+}
+.loading .spacer {
+  margin-right: 2px;
+}
+.loading span {
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 1px;
+}
+.loading span:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+.loading span:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+.loading2 {
+  display: inline-flex;
+  align-items: center;
+}
+.loading2 .spacer {
+  margin-right: 2px;
+}
+.loading2 span {
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  display: inline-block;
+  margin: 0 1px;
+}
+.loading2 span:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+.loading2 span:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
+  20% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}

components/loading-dots.tsx ADDED Viewed

	@@ -0,0 +1,17 @@

+import styles from "./loading-dots.module.css";
+export default function LoadingDots({
+  color = "#000",
+  style = "small",
+}: {
+  color: string;
+  style: string;
+}) {
+  return (
+    <span className={style == "small" ? styles.loading2 : styles.loading}>
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+      <span style={{ backgroundColor: color }} />
+    </span>
+  );
+}

hooks/use-scroll-to.ts ADDED Viewed

	@@ -0,0 +1,24 @@

+import { animate, ValueAnimationTransition } from "framer-motion";
+import { useRef } from "react";
+export function useScrollTo() {
+  let ref = useRef<HTMLDivElement>(null);
+  function scrollTo(options: ValueAnimationTransition = {}) {
+    if (!ref.current) return;
+    let defaultOptions: ValueAnimationTransition = {
+      type: "spring",
+      bounce: 0,
+      duration: 0.6,
+    };
+    animate(window.scrollY, ref.current.offsetTop, {
+      ...defaultOptions,
+      ...options,
+      onUpdate: (latest) => window.scrollTo({ top: latest }),
+    });
+  }
+  return [ref, scrollTo] as const;
+}

hooks/useDarkMode.tsx ADDED Viewed

	@@ -0,0 +1,50 @@

+'use client';
+import { createContext, useContext, useEffect, useState } from 'react';
+type DarkModeContextType = {
+  isDarkMode: boolean;
+  toggleDarkMode: () => void;
+};
+const DarkModeContext = createContext<DarkModeContextType | undefined>(undefined);
+export function DarkModeProvider({ children }: { children: React.ReactNode }) {
+  const [isDarkMode, setIsDarkMode] = useState(false);
+  useEffect(() => {
+    // Check if user has dark mode preference
+    const isDark = localStorage.getItem('darkMode') === 'true';
+    setIsDarkMode(isDark);
+    if (isDark) {
+      document.documentElement.classList.add('dark');
+    }
+  }, []);
+  const toggleDarkMode = () => {
+    setIsDarkMode((prev) => {
+      const newValue = !prev;
+      localStorage.setItem('darkMode', String(newValue));
+      if (newValue) {
+        document.documentElement.classList.add('dark');
+      } else {
+        document.documentElement.classList.remove('dark');
+      }
+      return newValue;
+    });
+  };
+  return (
+    <DarkModeContext.Provider value={{ isDarkMode, toggleDarkMode }}>
+      {children}
+    </DarkModeContext.Provider>
+  );
+}
+export function useDarkMode() {
+  const context = useContext(DarkModeContext);
+  if (context === undefined) {
+    throw new Error('useDarkMode must be used within a DarkModeProvider');
+  }
+  return context;
+}

lib/prisma.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+import { PrismaClient } from "@prisma/client";
+declare global {
+  var prisma: PrismaClient | undefined;
+}
+const client = globalThis.prisma || new PrismaClient();
+if (process.env.NODE_ENV !== "production") globalThis.prisma = client;
+export default client;

next.config.mjs ADDED Viewed

	@@ -0,0 +1,4 @@

+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+export default nextConfig;

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,45 @@

+{
+  "name": "llamacoder-new",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "prisma generate && prisma migrate deploy && next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@codesandbox/sandpack-react": "^2.18.2",
+    "@codesandbox/sandpack-themes": "^2.0.21",
+    "@conform-to/zod": "^1.1.5",
+    "@google/generative-ai": "^0.21.0",
+    "@heroicons/react": "^2.1.5",
+    "@prisma/client": "^5.18.0",
+    "@radix-ui/react-radio-group": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.2",
+    "@vercel/og": "^0.6.2",
+    "dedent": "^1.5.3",
+    "eventsource-parser": "^1.1.2",
+    "framer-motion": "^11.3.19",
+    "next": "14.2.5",
+    "react": "^18",
+    "react-dom": "^18",
+    "sonner": "^1.5.0",
+    "zod": "^3.23.8"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.5",
+    "prisma": "^5.18.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs ADDED Viewed

	@@ -0,0 +1,8 @@

+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+export default config;

prisma/migrations/20240808195804_first/migration.sql ADDED Viewed

	@@ -0,0 +1,13 @@

+-- CreateTable
+CREATE TABLE "GeneratedApp" (
+    "id" TEXT NOT NULL,
+    "model" TEXT NOT NULL,
+    "prompt" TEXT NOT NULL,
+    "code" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    CONSTRAINT "GeneratedApp_pkey" PRIMARY KEY ("id")
+);
+-- CreateIndex
+CREATE INDEX "GeneratedApp_id_idx" ON "GeneratedApp"("id");

prisma/migrations/migration_lock.toml ADDED Viewed

	@@ -0,0 +1,3 @@

+# Please do not edit this file manually
+# It should be added in your version-control system (i.e. Git)
+provider = "postgresql"

prisma/schema.prisma ADDED Viewed

	@@ -0,0 +1,18 @@

+generator client {
+  provider = "prisma-client-js"
+}
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+model GeneratedApp {
+  id        String   @id @default(nanoid(5))
+  model     String
+  prompt    String
+  code      String
+  createdAt DateTime @default(now())
+  @@index([id])
+}

public/Aeonik/Aeonik-Bold.ttf ADDED Viewed

	@@ -0,0 +1,3 @@

+version https://git-lfs.github.com/spec/v1
+oid sha256:017180ef3dccb7e01f8e1e617a736f94bd38c50f7a748b03f1d487e09e3d9f11
+size 100740

public/Aeonik/Aeonik-Medium.ttf ADDED Viewed

Binary file (99.6 kB). View file

public/Aeonik/Aeonik-Regular.ttf ADDED Viewed

Binary file (98.7 kB). View file

public/Aeonik/AeonikFono-Bold.otf ADDED Viewed

Binary file (64.5 kB). View file

public/Aeonik/AeonikFono-Regular.otf ADDED Viewed

Binary file (62.1 kB). View file

public/Aeonik/AeonikMono-Regular.otf ADDED Viewed

Binary file (50.4 kB). View file

public/cssIcon.png ADDED Viewed

public/favicon.ico ADDED Viewed

public/halo.png ADDED Viewed

Git LFS Details

SHA256: aba99f79264171859234983993d1a0ccf0ff15e9ac7ecc90ebcc084107dc4d6f
Pointer size: 132 Bytes
Size of remote file: 2.57 MB

public/logo.svg ADDED Viewed

tailwind.config.ts ADDED Viewed

	@@ -0,0 +1,31 @@

+import type { Config } from "tailwindcss";
+import colors from "tailwindcss/colors";
+import defaultTheme from "tailwindcss/defaultTheme";
+const config: Config = {
+  darkMode: "class",
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: "#E1E7EC",
+        gray: colors.slate,
+      },
+      backgroundColor: {
+        dark: "#0B1120",
+      },
+      backgroundImage: {
+        'dark-radial': 'radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%)',
+      },
+      fontFamily: {
+        sans: ['"Aeonik"', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+};
+export default config;

tsconfig.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

utils/domain.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+export const domain =
+  process.env.NEXT_PUBLIC_VERCEL_ENV === "production"
+    ? "https://llamacoder.together.ai"
+    : process.env.VERCEL_BRANCH_URL
+      ? `https://${process.env.VERCEL_BRANCH_URL}`
+      : process.env.NEXT_PUBLIC_VERCEL_URL
+        ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+        : process.env.NEXT_PUBLIC_DEVELOPMENT_URL
+          ? process.env.NEXT_PUBLIC_DEVELOPMENT_URL
+          : "http://localhost:3000";

utils/shadcn-docs/avatar.tsx ADDED Viewed

	@@ -0,0 +1,12 @@

+export const name = "Avatar";
+export const importDocs = `
+import { Avatar, AvatarFallback, AvatarImage } from "/components/ui/avatar";
+`;
+export const usageDocs = `
+<Avatar>
+  <AvatarImage src="https://github.com/nutlope.png" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>
+`;