Added creativity level, improved messaging in wasp-ai, some links.

wasp-ai/main.wasp

@@ -113,6 +113,7 @@ entity Project {=psl
   description String
   primaryColor String @default("sky")
   authMethod String @default("usernameAndPassword")
+  creativityLevel String @default("balanced")
   createdAt DateTime @default(now())
   status String @default("pending")
   userId Int?

wasp-ai/migrations/20230712122224_creativity_level/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Project" ADD COLUMN     "creativityLevel" TEXT NOT NULL DEFAULT 'balanced';

wasp-ai/src/client/Main.css

@@ -48,4 +48,11 @@ textarea {
 
 .status-icon {
   @apply rounded-full w-[27px] h-[27px] flex items-center justify-center;
+}
+
+.creativity-creative {
+  @apply text-orange-600;
+}
+.creativity-conservative {
+  @apply text-purple-600;
 }

wasp-ai/src/client/components/Dropdown.jsx

@@ -37,7 +37,7 @@ export function MyDropdown({ value, onChange, options }) {
               >
                 {({ selected }) => (
                   <>
-                    <Option value={option} selected={selected} />
+                    <Option value={option} selected={selected} showDescription={true} />
                     {selected ? (
                       <span className="absolute inset-y-0 left-0 flex items-center pl-3 text-slate-600">
                         <CheckIcon className="h-5 w-5" aria-hidden="true" />
@@ -54,19 +54,26 @@ export function MyDropdown({ value, onChange, options }) {
   );
 }
 
-function Option({ value, selected = false }) {
+function Option({ value, selected = false, showDescription = false }) {
   return (
     <span
-      className={`flex items-center truncate ${
+      className={`flex flex-col ${
         selected ? "font-medium" : "font-normal"
       }`}
     >
-      {value.color && (
-        <span className="mr-2">
-          <Color value={value.color} />
+      <span className="flex flex-row truncate">
+        {value.color && (
+          <span className="mr-2">
+            <Color value={value.color} />
+          </span>
+        )}
+        {value.name}
+      </span>
+      { showDescription && value.description && (
+        <span className="text-slate-800 font-light text-xs">
+          {value.description}
         </span>
       )}
-      {value.name}
     </span>
   );
 }

wasp-ai/src/client/components/Logs.jsx

@@ -87,7 +87,7 @@ export function Logs({ logs, status, onRetry }) {
               )}
             </div>
             {logs && (
-              <pre className="flex-1 overflow-x-auto">
+              <pre className="flex-1 overflow-x-auto z-10">
                 {logs.length === 0 && "Waiting for logs..."}
 
                 {visibleLogs.map((log, i) => (
@@ -102,7 +102,7 @@ export function Logs({ logs, status, onRetry }) {
                   >
                     {getEmoji(log) + " "}
                     {log}{" "}
-                    {i === 0 && (status === "error" || status === "cancelled") && (
+                    {i === (visibleLogs.length - 1) && (status === "error" || status === "cancelled" || status === "success") && (
                       <button onClick={onRetry} className="button gray xs">
                         Retry
                       </button>

wasp-ai/src/client/pages/MainPage.jsx

@@ -22,24 +22,43 @@ const MainPage = () => {
     availableColors.find((color) => color.name === "sky")
   );
 
+  const availableCreativityLevels = useMemo(
+    () => [{
+      value: "conservative",
+      name: "Conservative",
+      description: "Generates \"boring\" code with minimal amount of mistakes.",
+      disabled: false
+    }, {
+      value: "balanced",
+      name: "Balanced",
+      description: "Optimal trade-off between creativity and possible mistakes.",
+      disabled: false
+    }, {
+      value: "creative",
+      name: "Creative",
+      description: "Generates more creative code, but increases the chance of mistakes.",
+      disabled: false
+    }]
+  , []);
+  const [creativityLevel, setCreativityLevel] = useState(
+    availableCreativityLevels.find((lvl) => lvl.value === "balanced")
+  );
+
   const availableAuthMethods = useMemo(
     () => [
       {
         value: "usernameAndPassword",
         name: "Username & Password",
-        description: "Sign up and log in with username and password",
         disabled: false,
       },
       {
         value: "email",
         name: "Email & Password",
-        description: "Sign up and log in with email and password",
         disabled: true,
       },
       {
         value: "socialAuth",
         name: "Social Auth",
-        description: "Sign up and log in with Google & Github",
         disabled: true,
       },
     ],
@@ -60,6 +79,7 @@ const MainPage = () => {
         appDesc,
         appPrimaryColor: appPrimaryColor.name,
         appAuthMethod: appAuthMethod.value,
+        appCreativityLevel: creativityLevel.value,
       });
       history.push(`/result/${appId}`);
     } catch (e) {
@@ -110,8 +130,9 @@ const MainPage = () => {
             <textarea
               id="appDesc"
               required
-              placeholder="Describe your web app in a couple of sentences (check examples below).
-Based on your description, our AI code agent will generate a full-stack web app in Wasp, React, NodeJS and Prisma!"
+              placeholder="Describe your web app in a couple of sentences!
+Mention pages you want + what should be happening on them, what data should be stored in the db, etc.
+The simpler and more specific the app is, the better the generated app will be."
               value={appDesc}
               rows="5"
               cols="50"
@@ -119,7 +140,7 @@ Based on your description, our AI code agent will generate a full-stack web app
               disabled={currentStatus.status === "inProgress"}
             />
           </div>
-          <div className="grid md:grid-cols-2 gap-3">
+          <div className="grid md:grid-cols-3 gap-3">
             <div>
               <label
                 htmlFor="appPrimaryColor"
@@ -133,6 +154,19 @@ Based on your description, our AI code agent will generate a full-stack web app
                 options={availableColors}
               />
             </div>
+            <div>
+              <label
+                htmlFor="creativityLevel"
+                className="text-slate-700 block mb-2"
+              >
+                Creativity level
+              </label>
+              <MyDropdown
+                value={creativityLevel}
+                onChange={setCreativityLevel}
+                options={availableCreativityLevels}
+              />
+            </div>
             <div>
               <label
                 htmlFor="appAuthMethod"

wasp-ai/src/client/pages/ResultPage.jsx

@@ -20,6 +20,7 @@ import {
   PiDownloadDuotone,
   PiCheckDuotone,
 } from "react-icons/pi";
+import { RxQuestionMarkCircled } from "react-icons/rx";
 
 export const ResultPage = () => {
   const { appId } = useParams();
@@ -393,7 +394,11 @@ export default function RunTheAppModal({ disabled, onDownloadZip }) {
           </p>
 
           <div className="mt-6 bg-slate-100 rounded-lg p-4 text-base text-slate-800">
-            <h2 className="font-bold"> 1. Install Wasp CLI: </h2>
+            <h2 className="font-bold flex items-center space-x-1">
+              <span>1. Install Wasp CLI</span>
+              <a href="https://wasp-lang.dev/docs/quick-start#installation-1" target="blank" rel="noopener noreferrer"> <RxQuestionMarkCircled className="text-base" /> </a>
+              :
+            </h2>
             <pre className="mt-2 bg-slate-800 p-4 rounded-lg text-sm text-slate-200">
               curl -sSL https://get.wasp-lang.dev/installer.sh | sh
             </pre>
@@ -474,7 +479,7 @@ function WarningAboutAI() {
               >
                 Discord
               </a>
-              !
+              ! You can also try generating the app again to get different results (try playing with the creativity level).
             </p>
           </div>
         </div>

wasp-ai/src/client/pages/StatsPage.jsx

@@ -198,6 +198,9 @@ export function Stats() {
                     <th scope="col" className="px-6 py-3">
                       Time in Queue &rarr; Build
                     </th>
+                    <th scope="col" className="px-6 py-3">
+                      Creativity lvl
+                    </th>
                     <th scope="col" className="px-6 py-3"></th>
                   </tr>
                 </thead>
@@ -234,6 +237,9 @@ export function Stats() {
                         {getWaitingInQueueDuration(stat)} &rarr;{" "}
                         {getDuration(stat)}
                       </td>
+                      <td className={`px-6 py-4 creativity-${stat.creativityLevel}`}>
+                        {stat.creativityLevel}
+                      </td>
                       <td className="px-6 py-4">
                         <Link
                           to={`/result/${stat.id}`}

wasp-ai/src/server/jobs/generateApp.ts

@@ -38,9 +38,25 @@ export async function generateApp(
     unconsumedStdout: "",
   };
 
-  // { auth: 'UsernameAndPassword', primaryColor: string }
+  let defaultGptTemperature;
+  switch (project.creativityLevel) {
+    case "conservative":
+      defaultGptTemperature = 0.4;
+      break;
+    case "balanced":
+      defaultGptTemperature = 0.7;
+      break;
+    case "creative":
+      defaultGptTemperature = 1.0;
+      break;
+    default:
+      throw new Error(`Unknown creativity level: ${project.creativityLevel}`);
+  };
+
+  // { auth: 'UsernameAndPassword', primaryColor: string, defaultGptTemperature: number }
   const projectConfig = {
     primaryColor: project.primaryColor,
+    defaultGptTemperature
   };
 
   const stdoutMutex = new Mutex();

wasp-ai/src/server/operations.ts

@@ -9,6 +9,7 @@ export const startGeneratingNewApp: StartGeneratingNewApp<
     appDesc: string;
     appPrimaryColor: string;
     appAuthMethod: string;
+    appCreativityLevel: string;
   },
   string
 > = async (args, context) => {
@@ -40,6 +41,7 @@ export const startGeneratingNewApp: StartGeneratingNewApp<
       description: args.appDesc,
       primaryColor: args.appPrimaryColor,
       authMethod: args.appAuthMethod,
+      creativityLevel: args.appCreativityLevel,
       ...optionalUser,
     },
   });

waspc/src/Wasp/AI/OpenAI/ChatGPT.hs

@@ -56,12 +56,12 @@ queryChatGPT apiKey params requestMessages = do
   when True $
     pTrace
       ( "\n\n\n\n==================================\n"
+          <> "\n===== GPT PARAMS ======\n"
+          <> show params
           <> "\n====== REQUEST =======\n"
           <> show requestMessages
-          <> "\n======================\n"
           <> "\n====== RESPONSE ======\n"
           <> show chatResponse
-          <> "\n======================\n"
           <> "\n==================================\n\n\n\n"
       )
       $ return ()
@@ -85,6 +85,7 @@ data ChatGPTParams = ChatGPTParams
     --   we just didn't add them for now!
     --   Check https://platform.openai.com/docs/api-reference/completions/create for complete list.
   }
+  deriving (Show)
 
 -- TODO: There are some more data models there but for now we went with these core ones.
 data Model = GPT_3_5_turbo | GPT_3_5_turbo_16k | GPT_4