guerra-llm-ai-leaderboard

Running

App Files Files Community

luisrguerra commited on Jan 13

Commit

cf01265

•

1 Parent(s): b3b942f

Update index.html

Browse files

Files changed (1) hide show

index.html +91 -406

index.html CHANGED Viewed

@@ -1,413 +1,98 @@
 <!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>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Guerra LLM Ranking</title>
+    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+</head>
+<body>
+    <canvas id="radarChart" height="750"></canvas>
+    <script>
+        let data = {
+            labels: ['MMLU', 'MT-bench','Arena Elo'],
+            datasets: [
+              {
+                label: 'GPT-4-Turbo',
+                data: [null, 93.2,124.9],
+                borderWidth: 2
+              },
+              {
+                label: 'GPT-4-0314',
+                data: [86.4, 86.4,119.0],
+                borderWidth: 2
+              },
+              {
+                label: 'GPT-3.5-Turbo-0314',
+                data: [70.0, 79.4,112.3],
+                borderWidth: 2
+              },
+              {
+                label: 'Mistral Medium',
+                data: [75.3, 86.1,115.0],
+                borderWidth: 2
+              },
+              {
+                label: 'Mixtral 8x7B Instruct v0.1',
+                data: [70.6, 83.0,112.3],
+                borderWidth: 2
+              },
+              {
+                label: 'Claude 2.0',
+                data: [78.5, 80.6,113.1],
+                borderWidth: 2
+              },
+              {
+                label: 'Claude 1.0',
+                data: [77.0, 79.0,114.9],
+                borderWidth: 2
+              },
+              {
+                label: 'Claude Instant 1',
+                data: [73.4, 78.5,110.9],
+                borderWidth: 2
+              },
+              {
+                label: 'Gemini Pro',
+                data: [71.8, null,111.4],
+                borderWidth: 2
+              },
+              {
+                label: 'Yi 34B Chat',
+                data: [73.5, null,111.1],
+                borderWidth: 2
+              },
+              {
+                label: 'Falcon 180B Chat',
+                data: [68.0, null,103.1],
+                borderWidth: 2
+              },
+              {
+                label: 'LLama 2 70B Chat',
+                data: [63.0, 68.6,107.9],
+                borderWidth: 2
+              },
+            ]
+        };
+        let options = {
+            responsive: true,
+            maintainAspectRatio: false,
+            scale: {
+                ticks: {
+                    stepSize: 10,
+                }
+            },
+        };
+        let ctx = document.getElementById('radarChart').getContext('2d');
+        new Chart(ctx, {
+            type: 'radar',
+            data: data,
+            options: options
+        });
+    </script>
+</body>
 </html>