From 92890803564541acc26be788471624bfb6446133 Mon Sep 17 00:00:00 2001 From: Kahtaf Alam Date: Sun, 22 Jan 2023 15:20:32 -0500 Subject: [PATCH 1/2] Incorporate fast inference in favour of old text-to-image API --- components/auth/LoginHandler.js | 29 +++++------------------------ pages/index.js | 20 ++++++++++++-------- vanaApi.js | 26 +++++++++++++++++++++++++- 3 files changed, 42 insertions(+), 33 deletions(-) diff --git a/components/auth/LoginHandler.js b/components/auth/LoginHandler.js index 4826e29..5f2e890 100644 --- a/components/auth/LoginHandler.js +++ b/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 diff --git a/pages/index.js b/pages/index.js index a66efc1..a7b9717 100644 --- a/pages/index.js +++ b/pages/index.js @@ -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`, { + const response = 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." - ); + + // Append new images to user state + setUser({ + ...user, + textToImage: [...response.data.map((d) => d.url), ...user.textToImage], + }); } 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)} /> - +
Credit balance: {user?.balance ?? 0}
diff --git a/vanaApi.js b/vanaApi.js index f4fc1e1..ed57376 100644 --- a/vanaApi.js +++ b/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 }; From 78f12869c1e3edf22c4b7234f46e70d1fec7cd59 Mon Sep 17 00:00:00 2001 From: Kahtaf Alam Date: Sun, 22 Jan 2023 15:34:20 -0500 Subject: [PATCH 2/2] Refresh user state after image generation --- pages/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/pages/index.js b/pages/index.js index a7b9717..410a71f 100644 --- a/pages/index.js +++ b/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() { @@ -23,17 +23,17 @@ export default function Home() { setErrorMessage(null); try { - const response = await vanaApiPost(`images/generations`, { + 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 }); - // Append new images to user state - setUser({ - ...user, - textToImage: [...response.data.map((d) => d.url), ...user.textToImage], - }); + // Update user state (new images, balance, etc) + const user = await getUser(); + if (user) { + setUser(user); + } } catch (error) { - console.error(error) + console.error(error); setErrorMessage("An error occurred while generating the image"); }