guerra-llm-ai-leaderboard

Running

App Files Files Community

luisrguerra commited on Dec 24, 2023

Commit

b94e926

1 Parent(s): a1aede1

Update index.html

Browse files

Files changed (1) hide show

index.html +146 -40

index.html CHANGED Viewed

@@ -2,24 +2,27 @@
 <html>
 <head>
   <meta charset="UTF-8">
-  <!-- smartphone fix -->
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Stable Diffusion</title>
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <!--Bootstrap -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.min.js" integrity="sha512-fHY2UiQlipUq0dEabSM4s+phmn+bcxSYzXP4vAXItBvBHU7zAM/mkhCZjtBEIJexhOMzZbgFlPLuErlJF2b+0g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css" integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 </head>
-<body style="padding-inline: 0.5em;padding-block: 0.5em;">
     <label for="promptInput" class="form-label">Prompt:</label>
-    <input type="text" id="promptInput" class="form-control" placeholder="Prompt">
     <br>
     <label for="negativePromptInput" class="form-label">Negative Prompt:</label>
-    <input type="text" id="negativePromptInput" class="form-control" placeholder="Negative prompt">
     <br>
     <div class="row">
       <div class="col">
-        <label for="styleSelect" class="form-label">Style:</label>
         <select id="styleSelect" class="form-select">
         </select>
       </div>
@@ -40,14 +43,14 @@
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
-            Advanced options
           </button>
         </h2>
         <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushAdvancedOptions">
           <br>
           <!--Number of inference steps-->
           <label for="numInferenceStepsInput" class="form-label">Number of inference steps:</label>
-          <input type="number" id="numInferenceStepsInput" class="form-control" value="20" placeholder="Number of inference steps" min="0" max="30">
           <br>
           <!--Guidance scale-->
           <label for="guidanceScaleInput" class="form-label">Guidance Scale:</label>
@@ -57,6 +60,31 @@
           <label for="seedInput" class="form-label">Seed:</label>
           <input type="number" id="seedInput" class="form-control" value="0" placeholder="Seed"  min="0">
           <br>
           <!--Deepinfra API token-->
           <label for="authTokenInput" class="form-label">Deepinfra API token:</label>
           <input type="password" id="authTokenInput" class="form-control" placeholder="Deepinfra API token">
@@ -64,12 +92,16 @@
       </div>
     </div>
     <br>
-    <button id="generateButton" class="btn btn-primary">Generate image</button>
     <br><br>
-    <img id="generatedImage" style="max-width: 90vw;" width="512">
 </body>
 <script type="module">
 const stylesArray = [
   {
     name:'Default',
@@ -78,7 +110,17 @@ const stylesArray = [
   },
   {
     name:'Anime',
-    prompt: ',realistic anime, realistic manga, illustration, artwork, realistic anime illumination, realistic anime shading, [realistic anime Deviantart], [realistic anime Artstation], realistic anime wallpaper,[realistic anime fanart], [realistic anime Pinterest], realistic and detailed anime background, realistic anime shadows,',
     negative_prompt: ',black and white,b&w, monochrome, 3d render, photography, photo, [cartoon], abstract art, poorly drawn, (text), (dialog bubble), (letters), [cartoon comics], [superhero comics], signature, [minimalist art], 3d model, amateur anime artist,canvas frame,bad art,ugly,nude,porn,naked,nsfw,hentai,'
   },
   {
@@ -86,11 +128,21 @@ const stylesArray = [
     prompt: ',sharp image, full hd, 1080p,4k, [8k] ,[uhd], high quality, detailed, high resolution, [high res],[RAW photo], [HDR], [hard shadows], [cinematic shot], [dramatic lighting], [soft lighting], [dslr], professional photographer,photorealistic, realistic,real,',
     negative_prompt: ',blurry, low res, low resolution, low quality,ugly,nude,porn,naked,nsfw,hentai,'
   },
   {
     name:'Renaissance',
     prompt: ',renaissance painting style, [chiaroscuro],[detailed brushwork],[classical beauty],oil on canvas,[classical art],[historical art],oil painting,[fine details],[perspective],[masterpiece],[artwork style],[sharp image],[high resolution],[detailed],[professional style],[frescoes],',
     negative_prompt: ',(black and white),sepia,blurry, low res, low resolution, low quality,ugly,artist painting,artist drawing,(digital painting style),3d render,photo,nude,porn,naked,nsfw,'
   },
   {
     name:'Impressionism',
     prompt: ',impressionist painting style,[brushstrokes],[loose brushwork style],[natural light],[vibrant colors],[oil on canvas],',
@@ -108,17 +160,22 @@ const stylesArray = [
   },
   {
     name: "Art Nouveau",
-    prompt: ",Art Nouveau, beautiful art, sleek, organic forms, long, sinuous, art nouveau style,",
-    negative_prompt: ",ugly, deformed, noisy, blurry, low contrast, industrial, mechanical,"
   },
   {
     name: "Faded Polaroid Photo",
     prompt: ",Faded Polaroid Photo, analog, old faded photo, old polaroid,",
-    negative_prompt: ",ugly, deformed, noisy, blurry, low contrast, vibrant, colorful,"
   },
   {
     name: "Japanese Ink Drawing",
-    prompt: ",Japanese Ink Drawing, ink drawing, inkwash, Japanese Ink Drawing,",
     negative_prompt: ",ugly, deformed, noisy, blurry, low contrast, colorful, vibrant,"
   },
   {
@@ -131,11 +188,6 @@ const stylesArray = [
     prompt: ",Vector Art Stickers, professional vector design, sticker designs, Sticker Sheet,",
     negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,"
   },
-  {
-    name: "Action Figure",
-    prompt: ",Action Figure, plastic collectable action figure, collectable toy action figure,",
-    negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,"
-  },
   {
     name: "Art Deco",
     prompt: ",Art Deco, sleek, geometric forms, art deco style,",
@@ -144,32 +196,27 @@ const stylesArray = [
   {
     name: "Flat 2D Art",
     prompt: ",Flat 2D Art, simple flat color, 2-dimensional, Flat 2D Art Style,",
-    negative_prompt: ",ugly, deformed, noisy, blurry, low contrast, 3D, photo, realistic,"
   },
   {
     name: "Baroque",
     prompt: ",Baroque, dramatic, exuberant, grandeur, baroque art,",
     negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,"
   },
-  {
-    name: "Doodle Art",
-    prompt: ",Doodle Art Style, drawing, freeform, swirling patterns, doodle art style,",
-    negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,"
-  },
   {
     name: "Medievalism",
-    prompt: ",Medievalism, inspired by The Middle Ages, medieval art, elaborate patterns and decoration, Medievalism,",
-    negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,"
   },
   {
     name: "Pencil Sketch Drawing",
-    prompt: ",Pencil Sketch Drawing, black and white drawing, graphite drawing,",
     negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,"
   },
   {
     name: "3D Model",
-    prompt: ",professional 3d model, octane render, highly detailed, volumetric, dramatic lighting,",
-    negative_prompt: ",ugly, deformed, noisy, low poly, blurry, painting,"
   },
   {
     name: "Analog Film",
@@ -189,7 +236,52 @@ const stylesArray = [
   {
     name: "Pixel art",
     prompt: ",pixel-art, low-res, blocky, pixel art style, 8-bit graphics,",
-    negative_prompt: ",sloppy, messy, blurry, noisy, highly detailed, ultra textured, photo, realistic,"
   },
 ]
@@ -215,8 +307,6 @@ function loadStyleSelect() {
 }
 loadStyleSelect();
 document.getElementById('generateButton').addEventListener('click', generateImage);
 async function generateImage(){
   const authTokenTemp = document.getElementById('authTokenInput').value;
@@ -229,7 +319,9 @@ async function generateImage(){
   const guidanceScale = document.getElementById('guidanceScaleInput').value;
   const numInferenceSteps = document.getElementById('numInferenceStepsInput').value;
   const seed = document.getElementById('seedInput').value;
-  const model = 'stability-ai/sdxl';
   if (size === 'square'){
     height = 1024;
@@ -261,6 +353,8 @@ async function generateImage(){
   formData.append('width', width);
   formData.append('guidance_scale', guidanceScale);
   formData.append('num_inference_steps', numInferenceSteps);
   if (seed > 0){
     formData.append('seed', seed);
   }
@@ -273,15 +367,16 @@ async function generateImage(){
     const authToken = localStorage.getItem('authToken');
     if (!authToken){
       alert('Please enter your Deepinfra API token.');
-      return;
     }
     return authToken;
   }
-  const requestOptions = {
     method: 'POST',
     headers: {
-      'Authorization': `bearer ${getAuthToken()}`,
     },
     body: formData
   };
@@ -293,14 +388,25 @@ async function generateImage(){
     const data = await response.json();
     loadingButton(false);
     console.log("API response:",data);
     if (data.output && data.output.length > 0) {
       const imageElement = document.getElementById('generatedImage');
       imageElement.src = data.output[0];
     }
   } catch (error) {
-    alert('There was an error while making the request. Check the console for more information.');
-    console.error('There was an error while making the request:', error);
   }
 }
 </script>

 <html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>SDXL</title>
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <!--Bootstrap -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.min.js" integrity="sha512-fHY2UiQlipUq0dEabSM4s+phmn+bcxSYzXP4vAXItBvBHU7zAM/mkhCZjtBEIJexhOMzZbgFlPLuErlJF2b+0g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/css/bootstrap.min.css" integrity="sha512-Z/def5z5u2aR89OuzYcxmDJ0Bnd5V1cKqBEbvLOiUNWdg9PQeXVvXLI90SE4QOHGlfLqUnDNVAYyZi8UwUTmWQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <!-- Material Design Icons -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.2.96/css/materialdesignicons.min.css" integrity="sha512-LX0YV/MWBEn2dwXCYgQHrpa9HJkwB+S+bnBpifSOTO1No27TqNMKYoAn6ff2FBh03THAzAiiCwQ+aPX+/Qt/Ow==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+  <link rel="stylesheet" href="css/theme.css">
 </head>
+<body style="padding-inline: 0.8em;padding-block: 0.5em;">
     <label for="promptInput" class="form-label">Prompt:</label>
+    <input type="text" id="promptInput" class="form-control" placeholder="Ex: pet" autocomplete="off">
     <br>
     <label for="negativePromptInput" class="form-label">Negative Prompt:</label>
+    <input type="text" id="negativePromptInput" class="form-control" placeholder="Ex: cat" autocomplete="off">
     <br>
     <div class="row">
       <div class="col">
+        <label for="styleSelect" class="form-label">Artistic style:</label>
         <select id="styleSelect" class="form-select">
         </select>
       </div>
       <div class="accordion-item">
         <h2 class="accordion-header">
           <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
+            Advanced Options
           </button>
         </h2>
         <div id="flush-collapseOne" class="accordion-collapse collapse" data-bs-parent="#accordionFlushAdvancedOptions">
           <br>
           <!--Number of inference steps-->
           <label for="numInferenceStepsInput" class="form-label">Number of inference steps:</label>
+          <input type="number" id="numInferenceStepsInput" class="form-control" value="20" placeholder="Number of inference steps" min="8" max="25">
           <br>
           <!--Guidance scale-->
           <label for="guidanceScaleInput" class="form-label">Guidance Scale:</label>
           <label for="seedInput" class="form-label">Seed:</label>
           <input type="number" id="seedInput" class="form-control" value="0" placeholder="Seed"  min="0">
           <br>
+          <!--Refiner-->
+          <label for="refinerSelect" class="form-label">Refiner:</label>
+          <select id="refinerSelect" class="form-select">
+            <option value="no_refiner">No refiner</option>
+            <option value="expert_ensemble_refiner">Expert ensemble refiner</option>
+            <option value="base_image_refiner">Base image refiner</option>
+          </select>
+          <br>
+          <!--Sampler-->
+          <label for="samplerSelect" class="form-label">Sampler:</label>
+          <select id="samplerSelect" class="form-select">
+            <option value="DDIM">DDIM</option>
+            <option value="DPMSolverMultistep">DPMSolverMultistep</option>
+            <option value="HeunDiscrete">HeunDiscrete</option>
+            <option value="KarrasDPM">KarrasDPM</option>
+            <option value="K_EULER_ANCESTRAL">K_EULER_ANCESTRAL</option>
+            <option value="K_EULER">K_EULER</option>
+            <option value="PNDM">PNDM</option>
+          </select>
+          <br>
+          <!--Model-->
+          <label style="display: none;" for="modelSelect" class="form-label">Model:</label>
+          <select style="display: none;" id="modelSelect" class="form-select">
+            <option value="stability-ai/sdxl">stability-ai/sdxl</option>
+          </select>
           <!--Deepinfra API token-->
           <label for="authTokenInput" class="form-label">Deepinfra API token:</label>
           <input type="password" id="authTokenInput" class="form-control" placeholder="Deepinfra API token">
       </div>
     </div>
     <br>
+    <button id="generateButton" class="btn btn-outline">Generate image</button>
     <br><br>
+    <div class="d-flex justify-content-center">
+      <img id="generatedImage" style="max-width: 90vw;" width="512" class="justify-content-center">
+    </div>
 </body>
 <script type="module">
+const modelName = 'stability-ai/sdxl';
 const stylesArray = [
   {
     name:'Default',
   },
   {
     name:'Anime',
+    prompt: ',anime style, [manga], [illustration], [artwork], [anime wallpaper],[anime fanart], [detailed anime background], anime studio,',
+    negative_prompt: ',black and white,b&w, monochrome, 3d render, photography, photo, [cartoon], abstract art, poorly drawn, (text), (dialog bubble), (letters), [cartoon comics], [superhero comics], signature, [minimalist art], 3d model, amateur anime artist,canvas frame,bad art,ugly,nude,porn,naked,nsfw,hentai,'
+  },
+  {
+    name:'Anime - Studio Ghibli',
+    prompt: ',studio ghibli,[beautiful anime],',
+    negative_prompt: ',black and white,ugly,deformed,photo,3d render,abstract,noisy,blurry,poorly drawn,(text), (dialog bubble), (letters), [superhero comics],signature,amateur,nude,porn,naked,nsfw,hentai,'
+  },
+  {
+    name:'Realistic Anime',
+    prompt: ',realistic anime, realistic manga, [illustration], [artwork], realistic anime illumination, realistic anime shading, [realistic anime Deviantart], [realistic anime Artstation], [realistic anime wallpaper],[realistic anime fanart], [realistic anime Pinterest], realistic and detailed anime background, realistic anime shadows,',
     negative_prompt: ',black and white,b&w, monochrome, 3d render, photography, photo, [cartoon], abstract art, poorly drawn, (text), (dialog bubble), (letters), [cartoon comics], [superhero comics], signature, [minimalist art], 3d model, amateur anime artist,canvas frame,bad art,ugly,nude,porn,naked,nsfw,hentai,'
   },
   {
     prompt: ',sharp image, full hd, 1080p,4k, [8k] ,[uhd], high quality, detailed, high resolution, [high res],[RAW photo], [HDR], [hard shadows], [cinematic shot], [dramatic lighting], [soft lighting], [dslr], professional photographer,photorealistic, realistic,real,',
     negative_prompt: ',blurry, low res, low resolution, low quality,ugly,nude,porn,naked,nsfw,hentai,'
   },
+  {
+    name:'Realistic anatomy',
+    prompt: ',realistic anatomy,',
+    negative_prompt: ',amputee, deformed body, long neck, extra fingers, bad body proportions, mutated hands, mutilated, mutation, ugly, fused fingers, malformed limbs, extra heads, morbid, disfigured,'
+  },
   {
     name:'Renaissance',
     prompt: ',renaissance painting style, [chiaroscuro],[detailed brushwork],[classical beauty],oil on canvas,[classical art],[historical art],oil painting,[fine details],[perspective],[masterpiece],[artwork style],[sharp image],[high resolution],[detailed],[professional style],[frescoes],',
     negative_prompt: ',(black and white),sepia,blurry, low res, low resolution, low quality,ugly,artist painting,artist drawing,(digital painting style),3d render,photo,nude,porn,naked,nsfw,'
   },
+  {
+    name:'Caravaggio',
+    prompt: ',Caravaggio,Italian Baroque style, [chiaroscuro],[dramatic composition],oil painting,Renaissance art,',
+    negative_prompt: ',nude,porn,naked,nsfw,'
+  },
   {
     name:'Impressionism',
     prompt: ',impressionist painting style,[brushstrokes],[loose brushwork style],[natural light],[vibrant colors],[oil on canvas],',
   },
   {
     name: "Art Nouveau",
+    prompt: ",Art Nouveau style,illustration,detailed,artwork,[vintage],[[realistic anatomy]],",
+    negative_prompt: ",nude,porn,naked,nsfw,[deformed],[morbid],[disfigured],noisy,abstract,visual glitch,low contrast,blurry,"
+  },
+  {
+    name: "Art Nouveau - Harrison Fisher",
+    prompt: ",[Harrison Fisher],[[Gilded Age aesthetics]],",
+    negative_prompt: ",nude,porn,naked,nsfw,[deformed],[morbid],[disfigured],"
   },
   {
     name: "Faded Polaroid Photo",
     prompt: ",Faded Polaroid Photo, analog, old faded photo, old polaroid,",
+    negative_prompt: ",ugly, deformed, noisy, blurry, low contrast, vibrant, black and white,vibrant colors,"
   },
   {
     name: "Japanese Ink Drawing",
+    prompt: ",Japanese Ink Drawing, ink drawing, inkwash, Japanese Ink Drawing,[masterpiece],[detailed],",
     negative_prompt: ",ugly, deformed, noisy, blurry, low contrast, colorful, vibrant,"
   },
   {
     prompt: ",Vector Art Stickers, professional vector design, sticker designs, Sticker Sheet,",
     negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,"
   },
   {
     name: "Art Deco",
     prompt: ",Art Deco, sleek, geometric forms, art deco style,",
   {
     name: "Flat 2D Art",
     prompt: ",Flat 2D Art, simple flat color, 2-dimensional, Flat 2D Art Style,",
+    negative_prompt: ",ugly, deformed, noisy, blurry, low contrast, 3D render, photo, realistic,"
   },
   {
     name: "Baroque",
     prompt: ",Baroque, dramatic, exuberant, grandeur, baroque art,",
     negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,"
   },
   {
     name: "Medievalism",
+    prompt: ",Medievalism, inspired by The Middle Ages, medieval art, [elaborate patterns and decoration], Medievalism,",
+    negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,modern,"
   },
   {
     name: "Pencil Sketch Drawing",
+    prompt: ",Pencil Sketch Drawing style, black and white drawing, graphite drawing style,",
     negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,"
   },
   {
     name: "3D Model",
+    prompt: ",professional 3d model,3d render, [octane render], highly detailed, [volumetric], [dramatic lighting],",
+    negative_prompt: ",illustration,photo,ugly, deformed, noisy, low poly, blurry, painting,"
   },
   {
     name: "Analog Film",
   {
     name: "Pixel art",
     prompt: ",pixel-art, low-res, blocky, pixel art style, 8-bit graphics,",
+    negative_prompt: ",3d render,sloppy, messy, blurry, noisy, highly detailed, ultra textured, photo, realistic,"
+  },
+  {
+    name: "Watercolor",
+    prompt: ",watercolor painting, [vibrant], [beautiful], [painterly], [detailed], [textural], [artistic],",
+    negative_prompt: ",anime, photorealistic, photo, deformed, glitch, low contrast, noisy,ugly,3d render,photograph,blurry,low resolution,amateur,"
+  },
+  {
+    name: "Expressionist",
+    prompt: ",expressionist, [emotional], [dynamic], [distortion], [vibrant], [use of unusual colors], [detailed],",
+    negative_prompt: ",realism, symmetry, quiet, calm, ,anime, photorealistic, photo, deformed, glitch, low contrast, noisy,ugly,3d render,photograph,blurry,low resolution,amateur,"
+  },
+  {
+    name: "Vector",
+    prompt: ",vector art style,[flat],[svg],[adobe illustrator],",
+    negative_prompt: "3d render, photo, photorealistic, realistic cartoon, anime,"
+  },
+  {
+    name: "Greek sculpture",
+    prompt: ",greek sculpture,marble,",
+    negative_prompt: ",3d render, illustration,anime,painting,ugly,blurry,low resolution, low quality, amateur,"
+  },
+  {
+    name: "American Realism - Edward Hopper",
+    prompt: ",Edward Hopper,[oil paint],",
+    negative_prompt: ",3d render,anime,ugly,blurry,low resolution, low quality, amateur,photo,"
+  },
+  {
+    name: "American Realism",
+    prompt: ",American Realism,[oil paint],",
+    negative_prompt: ",3d render,anime,ugly,blurry,low resolution, low quality, amateur,photo,"
+  },
+  {
+    name: "Impasto",
+    prompt: ",impasto,[paint],",
+    negative_prompt: ",3d render,anime,ugly,blurry,low resolution, low quality, amateur,photo,abstract,"
+  },
+  {
+    name: "Roman Mosaic",
+    prompt: ",roman, mosaic,[art work],[detailed],",
+    negative_prompt: "dirt,ugly,paint,"
+  },
+  {
+    name: "Japanese traditional art",
+    prompt: ",Ukiyo-e,traditional Japanese art,woman,",
+    negative_prompt: ",anime,photo,digital,abstract,deformed,ugly,Katakana,Hiragana,Kanji,"
   },
 ]
 }
 loadStyleSelect();
 document.getElementById('generateButton').addEventListener('click', generateImage);
 async function generateImage(){
   const authTokenTemp = document.getElementById('authTokenInput').value;
   const guidanceScale = document.getElementById('guidanceScaleInput').value;
   const numInferenceSteps = document.getElementById('numInferenceStepsInput').value;
   const seed = document.getElementById('seedInput').value;
+  const model = document.getElementById('modelSelect').value;
+  const refiner = document.getElementById('refinerSelect').value;
+  const sampler = document.getElementById('samplerSelect').value;
   if (size === 'square'){
     height = 1024;
   formData.append('width', width);
   formData.append('guidance_scale', guidanceScale);
   formData.append('num_inference_steps', numInferenceSteps);
+  formData.append('refine', refiner);
+  formData.append('scheduler', sampler);
   if (seed > 0){
     formData.append('seed', seed);
   }
     const authToken = localStorage.getItem('authToken');
     if (!authToken){
       alert('Please enter your Deepinfra API token.');
+    return;
     }
     return authToken;
   }
+  let requestOptions = {
     method: 'POST',
     headers: {
+    'Authorization': `bearer ${getAuthToken()}`,
     },
     body: formData
   };
     const data = await response.json();
     loadingButton(false);
     console.log("API response:",data);
+    if (data.detail === 'User is not authorized to access this resource'){
+      alert("User is not authorized to access the api service. Please check your Deepinfra API token.");
+      console.error(data.detail);
+    }
+    if (data.error === "NSFW content detected. Try running it again, or try a different prompt."){
+      alert("NSFW content detected. Try running it again, or try a different prompt.");
+      console.error("NSFW content detected. Try running it again, or try a different prompt.");
+    }
     if (data.output && data.output.length > 0) {
       const imageElement = document.getElementById('generatedImage');
       imageElement.src = data.output[0];
     }
   } catch (error) {
+    alert('There was an error while making the api request. Make sure you have provided the deepinfra api key. Check the console for more information.');
+    console.error('There was an error while making the api request:', error);
+    loadingButton(false);
   }
 }
 </script>