Incorporate fast inference to replace old text-to-image API

components/auth/LoginHandler.js

@@ -3,7 +3,7 @@ import { LoginEmailForm } from "components/auth/forms/LoginEmailForm";
 import { LoginCodeForm } from "components/auth/forms/LoginCodeForm";
 import { StartLogin } from "components/auth/forms/StartLogin";
 import * as jose from "jose";
-import { vanaApiPost, vanaApiGet } from "vanaApi";
+import { getUser, vanaApiPost } from "vanaApi";
 
 /**
  * This component abstracts login. Feel free to take a look but you can just ignore it in this
@@ -16,33 +16,14 @@ export const LoginHandler = ({ children, setUser }) => {
 
   const refreshUserWithTimeout = async () => {
     const refreshUser = async () => {
-      const authToken = localStorage?.authToken ?? undefined;
-      if (authToken) {
-        const [exhibitsPromise, textToImagePromise, balancePromise] = [
-          vanaApiGet("account/exhibits"),
-          vanaApiGet("account/exhibits/text-to-image"),
-          vanaApiGet("account/balance"),
-        ];
-
-        const [exhibitsResponse, textToImageResponse, balanceResponse] =
-          await Promise.all([
-            exhibitsPromise,
-            textToImagePromise,
-            balancePromise,
-          ]);
-
-        const newUser = {
-          balance: balanceResponse?.balance ?? 0,
-          exhibits: exhibitsResponse?.exhibits ?? [],
-          textToImage: textToImageResponse?.urls ?? [],
-        };
-
-        setUser(newUser);
+      const user = await getUser();
+      if (user) {
+        setUser(user);
         setLoginState("loggedIn");
       }
     };
     await refreshUser();
-    setTimeout(refreshUserWithTimeout, 60000);
+    setTimeout(refreshUserWithTimeout, 1200000);
   };
 
   // Refresh the user's details every minute

pages/index.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import Head from "next/head";
 import { GithubIcon } from "components/icons/GithubIcon";
-import { vanaApiPost } from "vanaApi";
+import { getUser, vanaApiPost } from "vanaApi";
 import { LoginHandler } from "components/auth/LoginHandler";
 
 export default function Home() {
@@ -20,18 +20,20 @@ export default function Home() {
   const callTextToImageAPI = async (event) => {
     event.preventDefault();
     setIsLoading(true);
+    setErrorMessage(null);
 
     try {
-      await vanaApiPost(`jobs/text-to-image`, {
+      await vanaApiPost(`images/generations`, {
         prompt: prompt.replace(/\bme\b/i, "{target_token}"), // Replace the word "me" with "{target_token}" in the prompt to include yourself in the picture
-        exhibit_name: "text-to-image", // How your images are grouped in your gallery. For this demo, all images will be grouped in the `text-to-image` exhibit
-        n_samples: 5,
-        seed: -1, // The inference seed: A non-negative integer fixes inference so inference on the same (model, prompt) produces the same output
       });
-      alert(
-        "Successfully submitted prompt. New images will appear in about 7 minutes."
-      );
+
+      // Update user state (new images, balance, etc)
+      const user = await getUser();
+      if (user) {
+        setUser(user);
+      }
     } catch (error) {
+      console.error(error);
       setErrorMessage("An error occurred while generating the image");
     }
 
@@ -68,7 +70,9 @@ export default function Home() {
                     value={prompt}
                     onChange={(event) => setPrompt(event.target.value)}
                   />
-                  <button type="submit">Generate image</button>
+                  <button type="submit" disabled={isLoading}>
+                    Generate image
+                  </button>
                 </form>
                 <div>Credit balance: {user?.balance ?? 0}</div>
 

vanaApi.js

@@ -1,5 +1,29 @@
 import config from "./config";
 
+/**
+ * Call various Vana APIs and build and return a user object
+ */
+const getUser = async () => {
+  const authToken = localStorage?.authToken ?? undefined;
+  if (authToken) {
+    const [exhibitsPromise, textToImagePromise, balancePromise] = [
+      vanaApiGet("account/exhibits"),
+      vanaApiGet("account/exhibits/text-to-image"),
+      vanaApiGet("account/balance"),
+    ];
+
+    const [exhibitsResponse, textToImageResponse, balanceResponse] =
+      await Promise.all([exhibitsPromise, textToImagePromise, balancePromise]);
+
+    return {
+      balance: balanceResponse?.balance ?? 0,
+      exhibits: exhibitsResponse?.exhibits ?? [],
+      textToImage: textToImageResponse?.urls ?? [],
+    };
+  }
+  return null;
+};
+
 /**
  * Helper function to make Vana API calls
  */
@@ -39,4 +63,4 @@ const vanaApiPost = async (path, body) =>
  */
 const vanaApiGet = async (path) => vanaApiFetch(path, {});
 
-export { vanaApiGet, vanaApiPost };
+export { getUser, vanaApiGet, vanaApiPost };