test sign in

front/package.json

@@ -4,8 +4,8 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build && cp ./dist/index.html ../index.html",
+    "dev": "VITE_TEST_TOKEN=$(cat ~/.cache/huggingface/token) vite",
+    "build": "npm run format && tsc -b && vite build && cp ./dist/index.html ../index.html",
     "lint": "eslint .",
     "format": "npm run lint && prettier --write .",
     "preview": "vite preview"

front/src/App.tsx

@@ -5,6 +5,7 @@ import { ScriptMaker } from './components/ScriptMaker';
 import { AuthCard } from './components/AuthCard';
 
 function App() {
+  const [hfToken, setHfToken] = useState<string>('loading');
   const [genratedScript, setGeneratedScript] = useState<string>('');
   const [busy, setBusy] = useState<boolean>(false);
 
@@ -21,19 +22,27 @@ function App() {
           </p>
         </div>
 
-        <AuthCard />
+        <AuthCard hfToken={hfToken} setHfToken={setHfToken} />
 
-        <ScriptMaker
-          setScript={setGeneratedScript}
-          setBusy={setBusy}
-          busy={busy}
-        />
+        {hfToken === 'loading' ? (
+          <div className="p-4 col-span-1">
+            <div className="loading loading-spinner loading-lg"></div>
+          </div>
+        ) : (
+          <>
+            <ScriptMaker
+              setScript={setGeneratedScript}
+              setBusy={setBusy}
+              busy={busy}
+            />
 
-        <PodcastGenerator
-          genratedScript={genratedScript}
-          setBusy={setBusy}
-          busy={busy}
-        />
+            <PodcastGenerator
+              genratedScript={genratedScript}
+              setBusy={setBusy}
+              busy={busy}
+            />
+          </>
+        )}
       </div>
     </div>
   );

front/src/components/AuthCard.tsx

@@ -1,17 +1,65 @@
-import { oauthLoginUrl, /*oauthHandleRedirectIfPresent*/ } from "@huggingface/hub";
+import {
+  oauthLoginUrl,
+  oauthHandleRedirectIfPresent,
+  whoAmI,
+} from '@huggingface/hub';
+import { useEffect } from 'react';
+import { isDev, testToken } from '../utils/utils';
 
 const login = async () => {
   const url = await oauthLoginUrl();
   window.location.href = url;
-}
+};
 
-export const AuthCard = () => {
-  return <div className="card bg-base-100 w-full shadow-xl">
+export const AuthCard = ({
+  setHfToken,
+  hfToken,
+}: {
+  setHfToken: (token: string) => void;
+  hfToken: string;
+}) => {
+  useEffect(() => {
+    const checkToken = async () => {
+      if (isDev) {
+        console.log({ testToken });
+        return setHfToken(testToken);
+      }
+      const res = await oauthHandleRedirectIfPresent();
+      console.log('oauthHandleRedirectIfPresent', res);
+      if (res) {
+        try {
+          const myself = whoAmI({ accessToken: res.accessToken });
+          console.log('myself', myself);
+        } catch (e) {
+          console.log(e);
+          return setHfToken('');
+        }
+        return setHfToken(res.accessToken);
+      } else {
+        return setHfToken('');
+      }
+    };
+    checkToken();
+  }, []);
+
+  const isOK = hfToken && hfToken.startsWith('hf_');
+
+  return (
+    <div className="card bg-base-100 w-full shadow-xl">
       <div className="card-body">
-        <h2 className="card-title">Step 0: Sign in to use Inference Providers</h2>
+        <h2 className="card-title">
+          Step 0: Sign in to use Inference Providers
+        </h2>
         <div>
-          <button className="btn btn-primary" onClick={login}>🤗 Sign in with Hugging Face</button>
+          {isOK ? (
+            <button className="btn">✅ Nice, you are signed in</button>
+          ) : (
+            <button className="btn btn-primary" onClick={login}>
+              🤗 Sign in with Hugging Face
+            </button>
+          )}
         </div>
+      </div>
     </div>
-  </div>
-}
+  );
+};

front/src/config.ts

@@ -1,17 +1,14 @@
-function getUrlParam(paramName: string): string | null {
-  const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get(paramName);
-}
+// @ts-expect-error this is custom
+const TTS_SPACE_ID = window.huggingface?.variables?.TTS_SPACE_ID;
 
-const SPACE_ID = getUrlParam('SPACE_ID');
-const LLM_ENDPOINT = getUrlParam('LLM_ENDPOINT');
+// @ts-expect-error this is custom
+const LLM_ENDPOINT = window.huggingface?.variables?.LLM_ENDPOINT;
 
 export const CONFIG = {
   llmEndpoint:
-    LLM_ENDPOINT && LLM_ENDPOINT.length > 5
-      ? LLM_ENDPOINT
-      : 'https://gnb1thady6h3noiz.us-east-1.aws.endpoints.huggingface.cloud/v1/chat/completions',
-  ttsSpaceId: SPACE_ID || 'ngxson/kokoro-podcast-generator',
+    LLM_ENDPOINT ||
+    'https://gnb1thady6h3noiz.us-east-1.aws.endpoints.huggingface.cloud/v1/chat/completions',
+  ttsSpaceId: TTS_SPACE_ID || 'ngxson/kokoro-podcast-backend',
 };
 
 console.log({ CONFIG });

front/src/utils/utils.ts

@@ -6,6 +6,9 @@ import { Client } from '@gradio/client';
 import { asyncIterator } from '@sec-ant/readable-stream/ponyfill/asyncIterator';
 import { CONFIG } from '../config';
 
+export const isDev: boolean = import.meta.env.MODE === 'development';
+export const testToken: string = import.meta.env.VITE_TEST_TOKEN;
+
 // return URL to the WAV file
 export const generateAudio = async (
   content: string,

index.html

@@ -13,7 +13,7 @@ var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read fr
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _buf, _allowCR, _returnEmptyLines, _mapperFun, _TextLineStream_instances, handle_fn, _a, _t, _n, _r, _e, _u_instances, s_fn, i_fn;
+var _buf, _allowCR, _returnEmptyLines, _mapperFun, _TextLineStream_instances, handle_fn, _a, _t, _n, _r, _e, _u_instances, s_fn, i_fn, _b, _c, _d, _e2;
 (function polyfill() {
   const relList = document.createElement("link").relList;
   if (relList && relList.supports && relList.supports("modulepreload")) {
@@ -12337,12 +12337,12 @@ function transform_api_info(api_info, config, api_map) {
       transformed_info[category] = {};
       Object.entries(api_info[category]).forEach(
         ([endpoint, { parameters, returns }]) => {
-          var _a2, _b, _c, _d;
+          var _a2, _b2, _c2, _d2;
           const dependencyIndex = ((_a2 = config.dependencies.find(
             (dep) => dep.api_name === endpoint || dep.api_name === endpoint.replace("/", "")
           )) == null ? void 0 : _a2.id) || api_map[endpoint.replace("/", "")] || -1;
-          const dependencyTypes = dependencyIndex !== -1 ? (_b = config.dependencies.find((dep) => dep.id == dependencyIndex)) == null ? void 0 : _b.types : { generator: false, cancel: false };
-          if (dependencyIndex !== -1 && ((_d = (_c = config.dependencies.find((dep) => dep.id == dependencyIndex)) == null ? void 0 : _c.inputs) == null ? void 0 : _d.length) !== parameters.length) {
+          const dependencyTypes = dependencyIndex !== -1 ? (_b2 = config.dependencies.find((dep) => dep.id == dependencyIndex)) == null ? void 0 : _b2.types : { generator: false, cancel: false };
+          if (dependencyIndex !== -1 && ((_d2 = (_c2 = config.dependencies.find((dep) => dep.id == dependencyIndex)) == null ? void 0 : _c2.inputs) == null ? void 0 : _d2.length) !== parameters.length) {
             const components = config.dependencies.find((dep) => dep.id == dependencyIndex).inputs.map(
               (input) => {
                 var _a22;
@@ -12821,8 +12821,8 @@ async function walk_and_store_blobs(data, type = void 0, path = [], root = false
   return [];
 }
 function skip_queue(id, config) {
-  var _a2, _b;
-  let fn_queue = (_b = (_a2 = config == null ? void 0 : config.dependencies) == null ? void 0 : _a2.find((dep) => dep.id == id)) == null ? void 0 : _b.queue;
+  var _a2, _b2;
+  let fn_queue = (_b2 = (_a2 = config == null ? void 0 : config.dependencies) == null ? void 0 : _a2.find((dep) => dep.id == id)) == null ? void 0 : _b2.queue;
   if (fn_queue != null) {
     return !fn_queue;
   }
@@ -12908,8 +12908,8 @@ async function handle_blob(endpoint, data, api_info) {
   return data;
 }
 async function process_local_file_commands(client2, data) {
-  var _a2, _b;
-  const root = ((_a2 = client2.config) == null ? void 0 : _a2.root) || ((_b = client2.config) == null ? void 0 : _b.root_url);
+  var _a2, _b2;
+  const root = ((_a2 = client2.config) == null ? void 0 : _a2.root) || ((_b2 = client2.config) == null ? void 0 : _b2.root_url);
   if (!root) {
     throw new Error(ROOT_URL_ERROR_MSG);
   }
@@ -12925,9 +12925,9 @@ async function recursively_process_commands(client2, data, path = []) {
   }
 }
 async function process_single_command(client2, data, key) {
-  var _a2, _b;
+  var _a2, _b2;
   let cmd_item = data[key];
-  const root = ((_a2 = client2.config) == null ? void 0 : _a2.root) || ((_b = client2.config) == null ? void 0 : _b.root_url);
+  const root = ((_a2 = client2.config) == null ? void 0 : _a2.root) || ((_b2 = client2.config) == null ? void 0 : _b2.root_url);
   if (!root) {
     throw new Error(ROOT_URL_ERROR_MSG);
   }
@@ -14775,15 +14775,11 @@ function h(r, { preventCancel: e = false } = {}) {
   ), s = Object.create(l);
   return s[n] = a, s;
 }
-function getUrlParam(paramName) {
-  const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get(paramName);
-}
-const SPACE_ID = getUrlParam("SPACE_ID");
-const LLM_ENDPOINT = getUrlParam("LLM_ENDPOINT");
+const TTS_SPACE_ID = (_c = (_b = window.huggingface) == null ? void 0 : _b.variables) == null ? void 0 : _c.TTS_SPACE_ID;
+const LLM_ENDPOINT = (_e2 = (_d = window.huggingface) == null ? void 0 : _d.variables) == null ? void 0 : _e2.LLM_ENDPOINT;
 const CONFIG = {
-  llmEndpoint: LLM_ENDPOINT && LLM_ENDPOINT.length > 5 ? LLM_ENDPOINT : "https://gnb1thady6h3noiz.us-east-1.aws.endpoints.huggingface.cloud/v1/chat/completions",
-  ttsSpaceId: SPACE_ID || "ngxson/kokoro-podcast-generator"
+  llmEndpoint: LLM_ENDPOINT || "https://gnb1thady6h3noiz.us-east-1.aws.endpoints.huggingface.cloud/v1/chat/completions",
+  ttsSpaceId: TTS_SPACE_ID || "ngxson/kokoro-podcast-backend"
 };
 console.log({ CONFIG });
 const generateAudio = async (content, voice, speed = 1.1) => {
@@ -15127,19 +15123,19 @@ function initVisitor(visitor) {
   return visitor;
 }
 function callVisitor(key, node, visitor, path) {
-  var _a2, _b, _c, _d, _e2;
+  var _a2, _b2, _c2, _d2, _e3;
   if (typeof visitor === "function")
     return visitor(key, node, path);
   if (isMap(node))
     return (_a2 = visitor.Map) == null ? void 0 : _a2.call(visitor, key, node, path);
   if (isSeq(node))
-    return (_b = visitor.Seq) == null ? void 0 : _b.call(visitor, key, node, path);
+    return (_b2 = visitor.Seq) == null ? void 0 : _b2.call(visitor, key, node, path);
   if (isPair(node))
-    return (_c = visitor.Pair) == null ? void 0 : _c.call(visitor, key, node, path);
+    return (_c2 = visitor.Pair) == null ? void 0 : _c2.call(visitor, key, node, path);
   if (isScalar(node))
-    return (_d = visitor.Scalar) == null ? void 0 : _d.call(visitor, key, node, path);
+    return (_d2 = visitor.Scalar) == null ? void 0 : _d2.call(visitor, key, node, path);
   if (isAlias(node))
-    return (_e2 = visitor.Alias) == null ? void 0 : _e2.call(visitor, key, node, path);
+    return (_e3 = visitor.Alias) == null ? void 0 : _e3.call(visitor, key, node, path);
   return void 0;
 }
 function replaceNode(key, path, node) {
@@ -15592,13 +15588,13 @@ function findTagObject(value, tagName, tags) {
   });
 }
 function createNode(value, tagName, ctx) {
-  var _a2, _b, _c;
+  var _a2, _b2, _c2;
   if (isDocument(value))
     value = value.contents;
   if (isNode(value))
     return value;
   if (isPair(value)) {
-    const map2 = (_b = (_a2 = ctx.schema[MAP]).createNode) == null ? void 0 : _b.call(_a2, ctx.schema, null, ctx);
+    const map2 = (_b2 = (_a2 = ctx.schema[MAP]).createNode) == null ? void 0 : _b2.call(_a2, ctx.schema, null, ctx);
     map2.items.push(value);
     return map2;
   }
@@ -15637,7 +15633,7 @@ function createNode(value, tagName, ctx) {
     onTagObj(tagObj);
     delete ctx.onTagObj;
   }
-  const node = (tagObj == null ? void 0 : tagObj.createNode) ? tagObj.createNode(ctx.schema, value, ctx) : typeof ((_c = tagObj == null ? void 0 : tagObj.nodeClass) == null ? void 0 : _c.from) === "function" ? tagObj.nodeClass.from(ctx.schema, value, ctx) : new Scalar(value);
+  const node = (tagObj == null ? void 0 : tagObj.createNode) ? tagObj.createNode(ctx.schema, value, ctx) : typeof ((_c2 = tagObj == null ? void 0 : tagObj.nodeClass) == null ? void 0 : _c2.from) === "function" ? tagObj.nodeClass.from(ctx.schema, value, ctx) : new Scalar(value);
   if (tagName)
     node.tag = tagName;
   else if (!tagObj.default)
@@ -21486,7 +21482,7 @@ const ScriptMaker = ({
     setBusy(isGenerating);
   }, [isGenerating]);
   const generate = async () => {
-    var _a2, _b;
+    var _a2, _b2;
     setIsGenerating(true);
     setThought("");
     try {
@@ -21514,7 +21510,7 @@ const ScriptMaker = ({
       const chunks = getSSEStreamAsync(fetchResponse);
       for await (const chunk of chunks) {
         if (chunk.error) {
-          throw new Error(((_b = chunk.error) == null ? void 0 : _b.message) || "Unknown error");
+          throw new Error(((_b2 = chunk.error) == null ? void 0 : _b2.message) || "Unknown error");
         }
         const addedContent = chunk.choices[0].delta.content;
         responseContent += addedContent;
@@ -21625,11 +21621,11 @@ var __publicField = (obj, key, value) => {
 };
 var HUB_URL = "https://huggingface.co";
 async function createApiError(response, opts) {
-  var _a2, _b;
+  var _a2, _b2;
   const error2 = new HubApiError(response.url, response.status, (_a2 = response.headers.get("X-Request-Id")) != null ? _a2 : void 0);
   error2.message = `Api error with status ${error2.statusCode}${""}`;
   const trailer = [`URL: ${error2.url}`, error2.requestId ? `Request ID: ${error2.requestId}` : void 0].filter(Boolean).join(". ");
-  if ((_b = response.headers.get("Content-Type")) == null ? void 0 : _b.startsWith("application/json")) {
+  if ((_b2 = response.headers.get("Content-Type")) == null ? void 0 : _b2.startsWith("application/json")) {
     const json = await response.json();
     error2.message = json.error || json.message || error2.message;
     if (json.error_description) {
@@ -21654,6 +21650,22 @@ var HubApiError = class extends Error {
     this.url = url;
   }
 };
+function checkAccessToken(accessToken) {
+  if (!accessToken.startsWith("hf_")) {
+    throw new TypeError("Your access token must start with 'hf_'");
+  }
+}
+function checkCredentials(params) {
+  var _a2;
+  if (params.accessToken) {
+    checkAccessToken(params.accessToken);
+    return params.accessToken;
+  }
+  if ((_a2 = params.credentials) == null ? void 0 : _a2.accessToken) {
+    checkAccessToken(params.credentials.accessToken);
+    return params.credentials.accessToken;
+  }
+}
 new Promise((r) => {
 });
 function base64FromBytes(arr) {
@@ -21667,8 +21679,131 @@ function base64FromBytes(arr) {
     return globalThis.btoa(bin.join(""));
   }
 }
+async function oauthHandleRedirect(opts) {
+  var _a2, _b2, _c2;
+  if (typeof window === "undefined" && true) {
+    throw new Error("oauthHandleRedirect is only available in the browser, unless you provide redirectedUrl");
+  }
+  if (typeof localStorage === "undefined" && true) {
+    throw new Error(
+      "oauthHandleRedirect requires localStorage to be available, unless you provide nonce and codeVerifier"
+    );
+  }
+  const redirectedUrl = (_a2 = void 0) != null ? _a2 : window.location.href;
+  const searchParams = (() => {
+    try {
+      return new URL(redirectedUrl).searchParams;
+    } catch (err) {
+      throw new Error("Failed to parse redirected URL: " + redirectedUrl);
+    }
+  })();
+  const [error2, errorDescription] = [searchParams.get("error"), searchParams.get("error_description")];
+  if (error2) {
+    throw new Error(`${error2}: ${errorDescription}`);
+  }
+  const code = searchParams.get("code");
+  const nonce = (_b2 = void 0) != null ? _b2 : localStorage.getItem("huggingface.co:oauth:nonce");
+  if (!code) {
+    throw new Error("Missing oauth code from query parameters in redirected URL: " + redirectedUrl);
+  }
+  if (!nonce) {
+    throw new Error("Missing oauth nonce from localStorage");
+  }
+  const codeVerifier = (_c2 = void 0) != null ? _c2 : localStorage.getItem("huggingface.co:oauth:code_verifier");
+  if (!codeVerifier) {
+    throw new Error("Missing oauth code_verifier from localStorage");
+  }
+  const state = searchParams.get("state");
+  if (!state) {
+    throw new Error("Missing oauth state from query parameters in redirected URL");
+  }
+  let parsedState;
+  try {
+    parsedState = JSON.parse(state);
+  } catch (e) {
+    throw new Error("Invalid oauth state in redirected URL, unable to parse JSON: " + state);
+  }
+  if (parsedState.nonce !== nonce) {
+    throw new Error("Invalid oauth state in redirected URL");
+  }
+  const hubUrl = HUB_URL;
+  const openidConfigUrl = `${new URL(hubUrl).origin}/.well-known/openid-configuration`;
+  const openidConfigRes = await fetch(openidConfigUrl, {
+    headers: {
+      Accept: "application/json"
+    }
+  });
+  if (!openidConfigRes.ok) {
+    throw await createApiError(openidConfigRes);
+  }
+  const openidConfig = await openidConfigRes.json();
+  const tokenRes = await fetch(openidConfig.token_endpoint, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded"
+    },
+    body: new URLSearchParams({
+      grant_type: "authorization_code",
+      code,
+      redirect_uri: parsedState.redirectUri,
+      code_verifier: codeVerifier
+    }).toString()
+  });
+  {
+    localStorage.removeItem("huggingface.co:oauth:code_verifier");
+  }
+  {
+    localStorage.removeItem("huggingface.co:oauth:nonce");
+  }
+  if (!tokenRes.ok) {
+    throw await createApiError(tokenRes);
+  }
+  const token = await tokenRes.json();
+  const accessTokenExpiresAt = new Date(Date.now() + token.expires_in * 1e3);
+  const userInfoRes = await fetch(openidConfig.userinfo_endpoint, {
+    headers: {
+      Authorization: `Bearer ${token.access_token}`
+    }
+  });
+  if (!userInfoRes.ok) {
+    throw await createApiError(userInfoRes);
+  }
+  const userInfo = await userInfoRes.json();
+  return {
+    accessToken: token.access_token,
+    accessTokenExpiresAt,
+    userInfo,
+    state: parsedState.state,
+    scope: token.scope
+  };
+}
+async function oauthHandleRedirectIfPresent(opts) {
+  var _a2;
+  if (typeof window === "undefined" && true) {
+    throw new Error("oauthHandleRedirect is only available in the browser, unless you provide redirectedUrl");
+  }
+  if (typeof localStorage === "undefined" && true) {
+    throw new Error(
+      "oauthHandleRedirect requires localStorage to be available, unless you provide nonce and codeVerifier"
+    );
+  }
+  const searchParams = new URLSearchParams((_a2 = void 0) != null ? _a2 : window.location.search);
+  if (searchParams.has("error")) {
+    return oauthHandleRedirect();
+  }
+  if (searchParams.has("code")) {
+    if (!localStorage.getItem("huggingface.co:oauth:nonce")) {
+      console.warn(
+        "Missing oauth nonce from localStorage. This can happen when the user refreshes the page after logging in, without changing the URL."
+      );
+      return false;
+    }
+    return oauthHandleRedirect();
+  }
+  return false;
+}
 async function oauthLoginUrl(opts) {
-  var _a2, _b;
+  var _a2, _b2;
   if (typeof window === "undefined" && true) {
     throw new Error("oauthLogin is only available in the browser, unless you provide clientId and redirectUrl");
   }
@@ -21705,7 +21840,7 @@ async function oauthLoginUrl(opts) {
   });
   const variables = (
     // @ts-expect-error window.huggingface is defined inside static Spaces.
-    typeof window !== "undefined" ? (_b = (_a2 = window.huggingface) == null ? void 0 : _a2.variables) != null ? _b : null : null
+    typeof window !== "undefined" ? (_b2 = (_a2 = window.huggingface) == null ? void 0 : _a2.variables) != null ? _b2 : null : null
   );
   const clientId = variables == null ? void 0 : variables.OAUTH_CLIENT_ID;
   if (!clientId) {
@@ -21727,17 +21862,58 @@ async function oauthLoginUrl(opts) {
     code_challenge_method: "S256"
   }).toString()}`;
 }
+async function whoAmI(params) {
+  var _a2, _b2, _c2;
+  const accessToken = checkCredentials(params);
+  const res = await ((_a2 = params.fetch) != null ? _a2 : fetch)(`${(_b2 = params.hubUrl) != null ? _b2 : HUB_URL}/api/whoami-v2`, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`
+    }
+  });
+  if (!res.ok) {
+    throw await createApiError(res);
+  }
+  const response = await res.json();
+  if (typeof ((_c2 = response.auth.accessToken) == null ? void 0 : _c2.createdAt) === "string") {
+    response.auth.accessToken.createdAt = new Date(response.auth.accessToken.createdAt);
+  }
+  return response;
+}
 const login = async () => {
   const url = await oauthLoginUrl();
   window.location.href = url;
 };
-const AuthCard = () => {
+const AuthCard = ({
+  setHfToken,
+  hfToken
+}) => {
+  reactExports.useEffect(() => {
+    const checkToken = async () => {
+      const res = await oauthHandleRedirectIfPresent();
+      console.log("oauthHandleRedirectIfPresent", res);
+      if (res) {
+        try {
+          const myself = whoAmI({ accessToken: res.accessToken });
+          console.log("myself", myself);
+        } catch (e) {
+          console.log(e);
+          return setHfToken("");
+        }
+        return setHfToken(res.accessToken);
+      } else {
+        return setHfToken("");
+      }
+    };
+    checkToken();
+  }, []);
+  const isOK = hfToken && hfToken.startsWith("hf_");
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "card bg-base-100 w-full shadow-xl", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "card-body", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("h2", { className: "card-title", children: "Step 0: Sign in to use Inference Providers" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "btn btn-primary", onClick: login, children: "🤗 Sign in with Hugging Face" }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: isOK ? /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "btn", children: "✅ Nice, you are signed in" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "btn btn-primary", onClick: login, children: "🤗 Sign in with Hugging Face" }) })
   ] }) });
 };
 function App() {
+  const [hfToken, setHfToken] = reactExports.useState("loading");
   const [genratedScript, setGeneratedScript] = reactExports.useState("");
   const [busy, setBusy] = reactExports.useState(false);
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-base-300 min-h-screen", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-screen-lg mx-auto p-4 pb-32 grid gap-4 grid-cols-1", children: [
@@ -21749,23 +21925,25 @@ function App() {
         /* @__PURE__ */ jsxRuntimeExports.jsx(OpenInNewTab, { href: "https://hf.co/ngxson", children: "🤗 ngxson" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(AuthCard, {}),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ScriptMaker,
-      {
-        setScript: setGeneratedScript,
-        setBusy,
-        busy
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      PodcastGenerator,
-      {
-        genratedScript,
-        setBusy,
-        busy
-      }
-    )
+    /* @__PURE__ */ jsxRuntimeExports.jsx(AuthCard, { hfToken, setHfToken }),
+    hfToken === "loading" ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "p-4 col-span-1", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "loading loading-spinner loading-lg" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ScriptMaker,
+        {
+          setScript: setGeneratedScript,
+          setBusy,
+          busy
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        PodcastGenerator,
+        {
+          genratedScript,
+          setBusy,
+          busy
+        }
+      )
+    ] })
   ] }) });
 }
 if (!localStorage.getItem("debug")) {
@@ -26905,6 +27083,9 @@ html {
 .loading-sm {
   width: 1.25rem;
 }
+.loading-lg {
+  width: 2.5rem;
+}
 .mockup-browser .mockup-browser-toolbar .input {
   position: relative;
   margin-left: auto;