Spaces:

kcimc
/

gemini-p5-editor

Sleeping

App Files Files Community

kcimc commited on Mar 7, 2025

Commit

daf5695

1 Parent(s): 99f97d6

add route to hide key

Browse files

Files changed (4) hide show

README.md +1 -1
src/app/api/generate/route.js +52 -0
src/app/globals.css +48 -0
src/components/Editor.js +38 -67

README.md CHANGED Viewed

@@ -11,7 +11,7 @@ npm install
 2. Add your Gemini API key to `.env.local`:
 ```bash
-NEXT_PUBLIC_GEMINI_API_KEY=your_api_key_here
 ```
 3. Start the development server:

 2. Add your Gemini API key to `.env.local`:
 ```bash
+GEMINI_API_KEY=your_api_key_here
 ```
 3. Start the development server:

src/app/api/generate/route.js ADDED Viewed

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

+import { GoogleGenerativeAI } from "@google/generative-ai";
+const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
+const generationConfig = {
+  temperature: 1,
+  topP: 0.95,
+  topK: 40,
+  maxOutputTokens: 8192,
+  responseMimeType: "text/plain",
+};
+export async function POST(request) {
+  try {
+    const { prompt, modelName, temperature } = await request.json();
+    const model = genAI.getGenerativeModel({
+      model: modelName,
+      systemInstruction: "Respond only with p5.js JavaScript code. Do not add any additional commentary before or after the code.",
+    });
+    const chatSession = model.startChat({
+      generationConfig: {
+        ...generationConfig,
+        temperature: parseFloat(temperature)
+      },
+      history: [
+        {
+          role: "user",
+          parts: [{ text: prompt }],
+        },
+      ],
+    });
+    const result = await chatSession.sendMessage(prompt);
+    let generatedCode = result.response.text();
+    if (generatedCode.includes('```')) {
+      generatedCode = generatedCode
+        .split('```')
+        .filter((block, index) => index % 2 === 1)
+        .join('\n')
+        .replace(/^javascript\n/m, '')
+        .trim();
+    }
+    return Response.json({ code: generatedCode });
+  } catch (error) {
+    console.error('Error generating code:', error);
+    return Response.json({ error: error.message }, { status: 500 });
+  }
+}

src/app/globals.css CHANGED Viewed

@@ -53,3 +53,51 @@ iframe {
   border: none;
   background-color: white;
 }

   border: none;
   background-color: white;
 }
+/* Bottom controls styling */
+.bottom-controls {
+  backdrop-filter: blur(8px);
+  background-color: rgba(30, 30, 30, 0.95);
+  border: 1px solid rgba(75, 85, 99, 0.4);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+/* Input and select styling */
+.control-input {
+  background-color: rgba(31, 41, 55, 0.7) !important;
+  border: 1px solid rgba(75, 85, 99, 0.4) !important;
+  transition: all 0.2s ease;
+}
+.control-input:hover {
+  border-color: rgba(147, 197, 253, 0.4) !important;
+}
+.control-input:focus {
+  border-color: rgb(59, 130, 246) !important;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+  outline: none;
+}
+/* Button styling */
+.control-button {
+  font-weight: 500;
+  transition: all 0.2s ease;
+  border: 1px solid transparent;
+}
+.control-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+.control-button:active {
+  transform: translateY(0);
+}
+.control-button.active {
+  background-color: rgb(59, 130, 246) !important;
+  border-color: rgb(37, 99, 235) !important;
+}
+/* Remove checkbox and label styling since we're not using them anymore */

src/components/Editor.js CHANGED Viewed

@@ -4,7 +4,6 @@ import { useRef, useState, useEffect, useCallback } from 'react';
 import dynamic from 'next/dynamic';
 import { javascript } from '@codemirror/lang-javascript';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode';
-import { GoogleGenerativeAI } from "@google/generative-ai";
 // Dynamically import CodeMirror to avoid SSR issues
 const CodeMirror = dynamic(
@@ -21,16 +20,6 @@ function draw() {
   ellipse(mouseX, mouseY, 50, 50);
 }`;
-const genAI = new GoogleGenerativeAI(process.env.NEXT_PUBLIC_GEMINI_API_KEY);
-const generationConfig = {
-  temperature: 1,
-  topP: 0.95,
-  topK: 40,
-  maxOutputTokens: 8192,
-  responseMimeType: "text/plain",
-};
 const getIframeContent = (userCode) => `
 <!DOCTYPE html>
 <html>
@@ -138,37 +127,25 @@ export default function Editor() {
     setIsGenerating(true);
     try {
-      const model = genAI.getGenerativeModel({
-        model: selectedModel,
-        systemInstruction: "Respond only with p5.js JavaScript code. Do not add any additional commentary before or after the code.",
-      });
-      const chatSession = model.startChat({
-        generationConfig: {
-          ...generationConfig,
-          temperature: parseFloat(temperature)
         },
-        history: [
-          {
-            role: "user",
-            parts: [{ text: prompt }],
-          },
-        ],
       });
-      const result = await chatSession.sendMessage(prompt);
-      let generatedCode = result.response.text();
-      if (generatedCode.includes('```')) {
-        generatedCode = generatedCode
-          .split('```')
-          .filter((block, index) => index % 2 === 1)
-          .join('\n')
-          .replace(/^javascript\n/m, '')
-          .trim();
       }
-      setCode(generatedCode);
       if (autoGenerate) {
         // Wait a moment to let the preview update before generating again
@@ -240,19 +217,19 @@ export default function Editor() {
             />
           </div>
         </div>
-        <div className="absolute bottom-8 left-4 right-4 flex items-center gap-4 px-4 py-3 bg-[#1e1e1e] rounded-lg border border-gray-700 shadow-lg">
           <input
             type="text"
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
             onKeyPress={handleKeyPress}
             placeholder="Write code for a clock using p5.js"
-            className="flex-1 px-4 py-2 bg-gray-800 text-white rounded-md border border-gray-600"
           />
           <select
             value={selectedModel}
             onChange={(e) => setSelectedModel(e.target.value)}
-            className="px-4 py-2 bg-gray-800 text-white rounded-md border border-gray-600"
           >
             <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
             <option value="gemini-2.0-pro-exp-02-05">Gemini 2.0 Pro</option>
@@ -266,52 +243,46 @@ export default function Editor() {
               step="0.1"
               value={temperature}
               onChange={(e) => setTemperature(e.target.value)}
-              className="w-20 px-2 py-2 bg-gray-800 text-white rounded-md border border-gray-600"
             />
           </div>
-          <div className="flex gap-2">
-            <div className="flex items-center gap-2">
-              <label className="text-white">
-                <input
-                  type="checkbox"
-                  checked={autoSave}
-                  onChange={(e) => setAutoSave(e.target.checked)}
-                  className="mr-2"
-                />
-                Auto-save
-              </label>
-            </div>
             <button
               onClick={handleScreenshot}
-              className="px-6 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors"
             >
               Save Screenshot
             </button>
             <button
               onClick={handleSaveCode}
-              className="px-6 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700 transition-colors"
             >
               Save Code
             </button>
-            <div className="flex items-center gap-2">
-              <label className="text-white">
-                <input
-                  type="checkbox"
-                  checked={autoGenerate}
-                  onChange={(e) => setAutoGenerate(e.target.checked)}
-                  className="mr-2"
-                />
-                Auto-generate
-              </label>
-            </div>
             <button
               onClick={generateCode}
               disabled={isGenerating}
               className={`px-6 py-2 ${
                 isGenerating
                   ? 'bg-blue-400 cursor-not-allowed'
-                  : 'bg-blue-600 hover:bg-blue-700'
-              } text-white rounded-md transition-colors`}
             >
               {isGenerating ? 'Generating...' : 'Generate'}
             </button>

 import dynamic from 'next/dynamic';
 import { javascript } from '@codemirror/lang-javascript';
 import { vscodeDark } from '@uiw/codemirror-theme-vscode';
 // Dynamically import CodeMirror to avoid SSR issues
 const CodeMirror = dynamic(
   ellipse(mouseX, mouseY, 50, 50);
 }`;
 const getIframeContent = (userCode) => `
 <!DOCTYPE html>
 <html>
     setIsGenerating(true);
     try {
+      const response = await fetch('/api/generate', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
         },
+        body: JSON.stringify({
+          prompt,
+          modelName: selectedModel,
+          temperature: parseFloat(temperature)
+        }),
       });
+      const data = await response.json();
+      if (data.error) {
+        throw new Error(data.error);
       }
+      setCode(data.code);
       if (autoGenerate) {
         // Wait a moment to let the preview update before generating again
             />
           </div>
         </div>
+        <div className="absolute bottom-8 left-4 right-4 flex items-center gap-6 px-6 py-4 bottom-controls">
           <input
             type="text"
             value={prompt}
             onChange={(e) => setPrompt(e.target.value)}
             onKeyPress={handleKeyPress}
             placeholder="Write code for a clock using p5.js"
+            className="flex-1 px-4 py-2 rounded-md control-input"
           />
           <select
             value={selectedModel}
             onChange={(e) => setSelectedModel(e.target.value)}
+            className="px-4 py-2 rounded-md control-input"
           >
             <option value="gemini-2.0-flash">Gemini 2.0 Flash</option>
             <option value="gemini-2.0-pro-exp-02-05">Gemini 2.0 Pro</option>
               step="0.1"
               value={temperature}
               onChange={(e) => setTemperature(e.target.value)}
+              className="w-20 px-2 py-2 rounded-md control-input"
             />
           </div>
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => setAutoSave(!autoSave)}
+              className={`px-4 py-2 ${
+                autoSave ? 'active' : 'bg-gray-600'
+              } text-white rounded-md control-button`}
+            >
+              Auto-save
+            </button>
             <button
               onClick={handleScreenshot}
+              className="px-4 py-2 bg-emerald-600 text-white rounded-md control-button"
             >
               Save Screenshot
             </button>
             <button
               onClick={handleSaveCode}
+              className="px-4 py-2 bg-purple-600 text-white rounded-md control-button"
             >
               Save Code
             </button>
+            <button
+              onClick={() => setAutoGenerate(!autoGenerate)}
+              className={`px-4 py-2 ${
+                autoGenerate ? 'active' : 'bg-gray-600'
+              } text-white rounded-md control-button`}
+            >
+              Auto-generate
+            </button>
             <button
               onClick={generateCode}
               disabled={isGenerating}
               className={`px-6 py-2 ${
                 isGenerating
                   ? 'bg-blue-400 cursor-not-allowed'
+                  : 'bg-blue-600'
+              } text-white rounded-md control-button`}
             >
               {isGenerating ? 'Generating...' : 'Generate'}
             </button>