Spaces:

osanseviero
/

gemini-coder

Running

App Files Files Community

osanseviero commited on 2 days ago

Commit

9d1a465

•

1 Parent(s): a13a90f

Upload 56 files

Browse files

Files changed (11) hide show

app/(main)/layout.tsx +8 -3
app/(main)/page.tsx +15 -16
app/api/generateCode/route.ts +3 -0
app/layout.tsx +4 -1
components/DarkModeToggle.tsx +47 -0
components/Header.tsx +2 -2
components/ThemeProvider.tsx +48 -0
components/ThemeToggle.tsx +47 -0
hooks/useDarkMode.tsx +50 -0
package.json +3 -3
tailwind.config.ts +7 -1

app/(main)/layout.tsx CHANGED Viewed

@@ -2,6 +2,7 @@ import Image from "next/image";
 import bgImg from "@/public/halo.png";
 import Footer from "@/components/Footer";
 import Header from "@/components/Header";
 export default function Layout({
   children,
@@ -9,18 +10,22 @@ export default function Layout({
   children: React.ReactNode;
 }>) {
   return (
-    <body className="bg-brand antialiased">
       <div className="absolute inset-x-0 flex justify-center">
         <Image
           src={bgImg}
           alt=""
-          className="w-full max-w-[1200px] mix-blend-screen"
           priority
         />
       </div>
-      <div className="isolate">
         <div className="mx-auto flex min-h-screen max-w-7xl flex-col items-center justify-center py-2">
           <Header />
           {children}
           <Footer />

 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,
   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 />

app/(main)/page.tsx CHANGED Viewed

@@ -39,7 +39,6 @@ export default function Home() {
   let [generatedCode, setGeneratedCode] = useState("");
   let [initialAppConfig, setInitialAppConfig] = useState({
     model: "",
-    shadcn: true,
   });
   let [ref, scrollTo] = useScrollTo();
   let [messages, setMessages] = useState<{ role: string; content: string }[]>(
@@ -106,7 +105,7 @@ export default function Home() {
   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)] bg-gray-100 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"
       >
@@ -114,7 +113,7 @@ export default function Home() {
           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 sm:text-6xl">
         Turn your <span className="text-blue-600">idea</span>
         <br /> into an <span className="text-blue-600">app</span>
       </h1>
@@ -122,8 +121,8 @@ export default function Home() {
       <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" />
-            <div className="relative flex rounded-3xl bg-white shadow-sm">
               <div className="relative flex flex-grow items-stretch focus-within:z-10">
                 <textarea
                   rows={3}
@@ -131,14 +130,14 @@ export default function Home() {
                   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"
                   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"
               >
                 {status === "creating" ? (
                   <LoadingDots color="black" style="large" />
@@ -150,30 +149,30 @@ export default function Home() {
           </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 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 bg-white 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" />
                   </Select.Icon>
                 </Select.Trigger>
                 <Select.Portal>
-                  <Select.Content className="overflow-hidden rounded-md bg-white 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 data-[highlighted]:outline-none"
                         >
                           <Select.ItemText asChild>
-                            <span className="inline-flex items-center gap-2 text-gray-500">
                               <div className="size-2 rounded-full bg-green-500" />
                               {model.label}
                             </span>
@@ -194,7 +193,7 @@ export default function Home() {
         </fieldset>
       </form>
-      <hr className="border-1 mb-20 h-px bg-gray-700 dark:bg-gray-700" />
       {status !== "initial" && (
         <motion.div
@@ -226,9 +225,9 @@ export default function Home() {
                     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 bg-gradient-to-br from-gray-100 to-gray-300 md:inset-y-0 md:left-1/2 md:right-0"
                 >
-                  <p className="animate-pulse text-3xl font-bold">
                     {status === "creating"
                       ? "Building your app..."
                       : "Updating your app..."}

   let [generatedCode, setGeneratedCode] = useState("");
   let [initialAppConfig, setInitialAppConfig] = useState({
     model: "",
   });
   let [ref, scrollTo] = useScrollTo();
   let [messages, setMessages] = useState<{ role: string; content: string }[]>(
   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"
       >
           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}
                   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" />
           </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>
         </fieldset>
       </form>
+      <hr className="border-1 mb-20 h-px bg-gray-700 dark:bg-gray-700/30" />
       {status !== "initial" && (
         <motion.div
                     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..."}

app/api/generateCode/route.ts CHANGED Viewed

@@ -32,6 +32,8 @@ export async function POST(req: Request) {
     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) {
@@ -64,6 +66,7 @@ function getSystemPrompt() {
   systemPrompt += `
     NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
   `;
   return dedent(systemPrompt);
 }

     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) {
   systemPrompt += `
     NO OTHER LIBRARIES (e.g. zod, hookform) ARE INSTALLED OR ABLE TO BE IMPORTED.
   `;
   return dedent(systemPrompt);
 }

app/layout.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import "./globals.css";
 let title = "Gemini Coder – AI Code Generator";
 let description = "Generate your next app with Gemini";
@@ -38,7 +39,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" className="h-full">
-      {children}
     </html>
   );
 }

 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";
 }>) {
   return (
     <html lang="en" className="h-full">
+      <ThemeProvider>
+        {children}
+      </ThemeProvider>
     </html>
   );
 }

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/Header.tsx CHANGED Viewed

@@ -15,9 +15,9 @@ export default function Header() {
       <a
         href="https://github.com/osanseviero/geminicoder"
         target="_blank"
-        className="ml-auto hidden items-center gap-3 rounded-2xl bg-white px-6 py-2 sm:flex"
       >
-        <GithubIcon className="h-4 w-4" />
         <span>GitHub Repo</span>
       </a>
     </header>

       <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>
+  );
+}

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;
+}

package.json CHANGED Viewed

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "PORT=7860  next dev",
-    "build": "next build",
-    "start": "PORT=7860 next start",
     "lint": "next lint"
   },
   "dependencies": {

   "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": {

tailwind.config.ts CHANGED Viewed

@@ -3,6 +3,7 @@ import colors from "tailwindcss/colors";
 import defaultTheme from "tailwindcss/defaultTheme";
 const config: Config = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
@@ -14,7 +15,12 @@ const config: Config = {
         brand: "#E1E7EC",
         gray: colors.slate,
       },
       fontFamily: {
         sans: ['"Aeonik"', ...defaultTheme.fontFamily.sans],
       },

 import defaultTheme from "tailwindcss/defaultTheme";
 const config: Config = {
+  darkMode: "class",
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
         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],
       },