textarea input, added qwen 32b, removed icons

Nutlope · Nutlope · commit 2f7e8bc22c58 · 2024-11-15T13:59:59.000-05:00
diff --git a/app/(main)/page.tsx b/app/(main)/page.tsx
@@ -31,9 +31,10 @@ export default function Home() {
       value: "meta-llama/Llama-3.2-90B-Vision-Instruct-Turbo",
     },
     {
-      label: "Qwen 2.5 72B",
-      value: "Qwen/Qwen2.5-72B-Instruct-Turbo",
+      label: "Qwen 2.5 Coder 32B",
+      value: "Qwen/Qwen2.5-Coder-32B-Instruct",
     },
+
     {
       label: "Gemma 2 27B",
       value: "google/gemma-2-27b-it",
@@ -163,12 +164,13 @@ export default function Home() {
             <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">
-                <input
+                <textarea
+                  rows={3}
                   required
                   value={prompt}
                   onChange={(e) => setPrompt(e.target.value)}
                   name="prompt"
-                  className="w-full rounded-l-3xl bg-transparent px-6 py-5 text-lg focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-500"
+                  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>
diff --git a/app/api/generateCode/route.ts b/app/api/generateCode/route.ts
@@ -216,11 +216,13 @@ function getSystemPrompt(shadcn: boolean) {
     - 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.
-    - The lucide-react library is also available to be imported ONLY FOR THE FOLLOWING ICONS: Heart, Shield, Clock, Users, Play, Home, Search, Menu, User, Settings, Mail, Bell, Calendar, Clock, Heart, Star, Upload, Download, Trash, Edit, Plus, Minus, Check, X, ArrowRight
-    - Here's an example of importing and using one: import { Heart } from "lucide-react"\` & \`<Heart className=""  />\`. PLEASE ONLY USE THE ICONS LISTED ABOVE.
     - For placeholder images, please use a <div className="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16" />
   `;
 
+  // - The lucide-react library is also available to be imported IF NECCESARY ONLY FOR THE FOLLOWING ICONS: Heart, Shield, Clock, Users, Play, Home, Search, Menu, User, Settings, Mail, Bell, Calendar, Clock, Heart, Star, Upload, Download, Trash, Edit, Plus, Minus, Check, X, ArrowRight.
+  // - Here's an example of importing and using one: import { Heart } from "lucide-react"\` & \`<Heart className=""  />\`.
+  // - PLEASE ONLY USE THE ICONS LISTED ABOVE IF AN ICON IS NEEDED IN THE USER'S REQUEST. Please DO NOT use the lucide-react library if it's not needed.
+
   if (shadcn) {
     systemPrompt += `
     There are some prestyled components available for use. Please use your best judgement to use any of these components if the app calls for one.
