guerra-llm-ai-leaderboard

Running

File size: 19,195 Bytes

<!DOCTYPE html>
<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="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="8" max="25">
          <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>
          <!--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>
    </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',
    prompt: '',
    negative_prompt: ''
  },
  {
    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,'
  },
  {
    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:'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],',
    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 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,"
  },
  {
    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: "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 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",
    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: ",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,"
  },
]

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 = document.getElementById('modelSelect').value;
  const refiner = document.getElementById('refinerSelect').value;
  const sampler = document.getElementById('samplerSelect').value;

  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);
  formData.append('refine', refiner);
  formData.append('scheduler', sampler);
  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;
  }
  

  let 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.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>
</html>