Spaces:

luisrguerra
/

sdxl-deepinfra-cloud-webui-need-key

Running

App Files Files Community

luisrguerra commited on Dec 10, 2023

Commit

2cb9466

1 Parent(s): ab39600

Update index.html

Browse files

Files changed (1) hide show

index.html +305 -22

index.html CHANGED Viewed

@@ -1,24 +1,307 @@
 <!DOCTYPE html>
 <html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>
-				You can modify this app directly by editing <i>index.html</i> in the
-				Files and versions tab.
-			</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank"
-					>Spaces documentation</a
-				>.
-			</p>
-		</div>
-	</body>
-</html>

 <!DOCTYPE html>
 <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>
+      <div class="col">
+        <label for="sizeSelect" class="form-label">Image dimensions:</label>
+        <select id="sizeSelect" class="form-select">
+          <option value="square">Square</option>
+          <option value="portrait">Portrait</option>
+          <option value="landscape">Landscape</option>
+          <option value="stories">Stories</option>
+          <option value="ultrawide">Ultrawide</option>
+        </select>
+      </div>
+    </div>
+    <br>
+    <!--Advanced options-->
+    <div class="accordion accordion-flush" id="accordionFlushAdvancedOptions">
+      <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>
+          <input type="number" id="guidanceScaleInput" class="form-control" value="7.5" placeholder="guidanceScale" min="4" max="10">
+          <br>
+          <!--Seed-->
+          <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">
+        </div>
+      </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',
+    prompt: '',
+    negative_prompt: ''
+  },
+  {
+    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,'
+  },
+  {
+    name:'Photo',
+    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],',
+    negative_prompt: ',(black and white),sepia, low res, low resolution, low quality,ugly,artist painting,artist drawing,(digital painting style),3d render,photo,nude,porn,naked,nsfw,'
+  },
+  {
+    name:'Painting',
+    prompt: ',(painting style),artwork style,[masterpiece],art style,[sharp image],[high resolution],[beautiful],[detailed],[professional style],',
+    negative_prompt: ',blurry, low res, low resolution, low quality,ugly,artist painting,artist drawing,digital painting style,nude,porn,naked,nsfw,'
+  },
+  {
+    name:'Illustration',
+    prompt: ',illustration,artwork style,masterpiece,art style,sharp image,high resolution,beautiful,detailed,professional style,',
+    negative_prompt: ',blurry, low res, low resolution, low quality,ugly,artist painting,artist drawing,nude,porn,naked,nsfw,'
+  },
+  {
+    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,"
+  },
+  {
+    name: "Rococo",
+    prompt: ",Rococo, flamboyant, pastel colors, curved lines, elaborate detail, Rococo,",
+    negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,"
+  },
+  {
+    name: "Sticker Designs",
+    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,",
+    negative_prompt: ",ugly, deformed, noisy, blurry, low contrast,"
+  },
+  {
+    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",
+    prompt: ",analog film photo, faded film, desaturated, 35mm photo, grainy, vignette, vintage, Kodachrome, Lomography, stained, highly detailed, found footage,",
+    negative_prompt: ",painting, drawing, illustration, glitch, deformed, mutated, cross-eyed, ugly, disfigured,"
+  },
+  {
+    name: "Comic Book",
+    prompt: ",comic, graphic illustration, comic art, graphic novel art, vibrant, highly detailed,",
+    negative_prompt: ",photograph, deformed, glitch, noisy, realistic, stock photo,"
+  },
+  {
+    name: "Origami",
+    prompt: ",origami style, paper art, pleated paper, folded, origami art, pleats, cut and fold, centered composition,",
+    negative_prompt: ",noisy, sloppy, messy, grainy, highly detailed, ultra textured, photo,"
+  },
+  {
+    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,"
+  },
+]
+function loadingButton(boolean){
+  if (boolean){
+    document.getElementById('generateButton').innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...';
+    document.getElementById('generateButton').disabled = true;
+  } else {
+    document.getElementById('generateButton').innerHTML = 'Generate image';
+    document.getElementById('generateButton').disabled = false;
+  }
+}
+function loadStyleSelect() {
+  const styleSelect = document.getElementById('styleSelect');
+  stylesArray.forEach(style => {
+    const option = document.createElement('option');
+    option.value = style.name;
+    option.textContent = style.name;
+    styleSelect.appendChild(option);
+  });
+}
+loadStyleSelect();
+document.getElementById('generateButton').addEventListener('click', generateImage);
+async function generateImage(){
+  const authTokenTemp = document.getElementById('authTokenInput').value;
+  let prompt = document.getElementById('promptInput').value;
+  let negativePrompt = document.getElementById('negativePromptInput').value;
+  let height = 512;
+  let width = 512;
+  const style = document.getElementById('styleSelect').value;
+  const size = document.getElementById('sizeSelect').value;
+  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;
+    width = 1024;
+  } else if (size === 'portrait'){
+    height = 1024;
+    width = 768;
+  } else if (size === 'landscape'){
+    height = 768;
+    width = 1024;
+  } else if (size === 'stories'){
+    height = 1024;
+    width = 512;
+  } else if (size === 'ultrawide'){
+    height = 512;
+    width = 1024;
+  }
+  const selectedStyleObj = stylesArray.find(styleObj => styleObj.name === style);
+  if (selectedStyleObj) {
+    prompt += selectedStyleObj.prompt;
+    negativePrompt += selectedStyleObj.negative_prompt;
+  }
+  const formData = new FormData();
+  formData.append('prompt', prompt);
+  formData.append('negative_prompt', negativePrompt);
+  formData.append('height', height);
+  formData.append('width', width);
+  formData.append('guidance_scale', guidanceScale);
+  formData.append('num_inference_steps', numInferenceSteps);
+  if (seed > 0){
+    formData.append('seed', seed);
+  }
+  if (authTokenTemp){
+    localStorage.setItem('authToken', authTokenTemp);
+  }
+  function getAuthToken(){
+    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
+  };
+  try {
+    loadingButton(true);
+    const url = `https://api.deepinfra.com/v1/inference/${model}`;
+    const response = await fetch(url, requestOptions);
+    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>