davidau/openai_gpt-oss-20b-coder-neo-code-di-matrix-gguf overview

{
  "metadata": {},
  "card_data": {
    "license": "apache-2.0",
    "base_model": [
      "openai/gpt-oss-20b"
    ],
    "language": [
      "en"
    ],
    "pipeline_tag": "text-generation",
    "tags": [
      "gpt_oss",
      "gpt-oss",
      "openai",
      "mxfp4",
      "programming",
      "code generation",
      "code",
      "coding",
      "coder",
      "chat",
      "code",
      "chat",
      "reasoning",
      "thinking",
      "r1",
      "cot",
      "deepseek",
      "128k context",
      "general usage",
      "problem solving",
      "brainstorming",
      "solve riddles",
      "general usage",
      "openai",
      "Neo",
      "MOE",
      "Mixture of Experts",
      "24 experts",
      "NEO Imatrix",
      "Code Imatrix",
      "DI-Matrix",
      "Dual Imatrix",
      "Imatrix"
    ],
    "frontmatter": {
      "license": "apache-2.0",
      "base_model": [
        "openai/gpt-oss-20b"
      ],
      "language": [
        "en"
      ],
      "pipeline_tag": "text-generation",
      "tags": [
        "gpt_oss",
        "gpt-oss",
        "openai",
        "mxfp4",
        "programming",
        "code generation",
        "code",
        "coding",
        "coder",
        "chat",
        "code",
        "chat",
        "reasoning",
        "thinking",
        "r1",
        "cot",
        "deepseek",
        "128k context",
        "general usage",
        "problem solving",
        "brainstorming",
        "solve riddles",
        "general usage",
        "openai",
        "Neo",
        "MOE",
        "Mixture of Experts",
        "24 experts",
        "NEO Imatrix",
        "Code Imatrix",
        "DI-Matrix",
        "Dual Imatrix",
        "Imatrix"
      ]
    },
    "hero_image_url": "matrix2.webp",
    "summary": "Specialized quants (including \"MXFP4_MOE.gguf\") for new OpenAI 20B MOE - Mixture of Experts Model at 80+ t/s. Openai_gpt-oss-20b-CODER-NEO-CODE-DI-MATRIX-GGUF  These are DUEL NEO Imatrix / CODE IMATRIX GGUFs, NEO dataset by DavidAU with \"Code\" dataset compiled by DavidAU. NEO dataset improves overall performance. CODER dataset is specifically for coding performance. Example generation provided at bottom of this page. DUEL (\"DI\")-> Separate Imatrix datasets (\"NEO\" and \"CODER\" - generated separately per model) are co-joined to create a new Imatrix dataset, which is then applied to the quants. Model also passed \"hard\" coding test too (4 experts); no issues (IQ4_NL). TEST: Forcing the model to create code with no dependencies and limits of coding short cuts, with multiple loops, and in real time with no blocking in a language that does not support it normally. (example prompt, and generation below) Due to quanting issues with this model (which result in oddball quant sizes / mixtures), only TESTED quants will be uploaded (at the moment). Currently that means IQ4_NL, and MXFP4_MOE (a new OpenAI specific quant type) are available. NEO/Coder datasets performance improvements will show the most in the IQ4_NL quants. There are TWO \"IQ4_NL\" quants: There are THREE NEO MXFP4_MOE quants: MXFP4_MOE quants vastly outperform (at the moment) all other quants, except IQ4_NL, Q5_1 and Q8_0 due to odd issues compressing OpenAI's 20B model due to odd \"tensor\" dimensions. ( IQ4_NL, Q5_1 and Q8_0 quants are compatible with OpenAI's tensor structure as of this writing. ) MXFP4_MOE quant was specifically designed for (what appears to be) loss less quantization relative to source model. Jury still out on this. Suggested Settings (tested in Lmstudio, Beta Branch 0.3.21 ; 4 ): Model Supports: For my help docs, SETTING NUMBER OF EXPERTS, and other see below. See more about this model here: https://huggingface.co/openai/gpt-oss-20b Please refer to their model card, especially to control \"thinking\" levels. --- Help, Adjustments, Samplers, Parameters and More --- CHANGE THE NUMBER OF ACTIVE EXPERTS: See this document: https://huggingface.co/DavidAU/How-To-Set-and-Manage-MOE-Mix-of-Experts-Model-Activation-of-Experts Settings: CHAT / ROLEPLAY and/or SMOOTHER operation of this model: In \"KoboldCpp\" or  \"oobabooga/text-generation-webui\" or \"Silly Tavern\" ; Set the \"Smoothing_factor\" to 1.5 : in KoboldCpp -> Settings->Samplers->Advanced-> \"Smooth_F\" : in text-generation-webui -> parameters -> lower right. : In Silly Tavern this is called: \"Smoothing\" NOTE: For \"text-generation-webui\" -> if using GGUFs you need to use \"llama_HF\" (which involves downloading some config files from the SOURCE version of this model) Source versions (and config files) of my models are here: https://huggingface.co/collections/DavidAU/d-au-source-files-for-gguf-exl2-awq-gptq-hqq-etc-etc-66b55cb8ba25f914cbf210be OTHER OPTIONS: Highest Quality Settings / Optimal Operation Guide / Parameters and Samplers This a \"Class 1\" model: For all settings used for this model (including specifics for its \"class\"), including example generation(s) and for advanced settings guide (which many times addresses any model issue(s)), including methods to improve model performance for all use case(s) as well as chat, roleplay and other use case(s) please see: [ https://huggingface.co/DavidAU/Maximizing-Model-Performance-All-Quants-Types-And-Full-Precision-by-Samplers_Parameters ] You can see all parameters used for generation, in addition to advanced parameters and samplers to get the most out of this model here: [ https://huggingface.co/DavidAU/Maximizing-Model-Performance-All-Quants-Types-And-Full-Precision-by-Samplers_Parameters ] --- Example Generation Using default settings (coder), 4 experts and no system prompt. --- Prompt:  Write a JavaScript for fetch api using 4 ais, all using streaming that does NOT use \"promise.all\", and processes all streams separately but in real time - that means all streams need to be processed at the same time and not interrupt each other. Also include sending a payload to each of the 4 ais with content, system prompt, temp, topk, topp, minp, repeat penalty ; all of these parameters will be in an array for each of the four ais. Record the entire response - chunks - from each AI in an array - text. Also, send the chunks in real time to 4 separate text boxes on an HTML page so real time readout from each AI can be seen by the user. IMPORTANT: All streams must be processed at the same time, not in sequence. IMPORTANT: Do not use any dependencies, nor import any module(s).  OUTPUT: (note: Pretty print, color and some formatting lost on copy/paste)  Thought for 11.81 seconds We need to write JavaScript code that uses fetch API with streaming responses (likely using ReadableStream from Response.body.getReader()). We have 4 AI endpoints; each will be called with a payload containing content, system prompt, temp, topk, topp, minp, repeat penalty. These parameters are in an array for each of the four AIs. We need to process all streams concurrently, not sequentially, and not using Promise.all. So we can start fetch calls, get readers, then read from each reader in separate async functions that run concurrently (like starting them but not awaiting). We need to send chunks in real time to 4 separate text boxes on an HTML page. We cannot use dependencies or import modules; just plain JS. We need to record entire response chunks per AI into arrays. So we maintain array of strings for each AI, push each chunk as it arrives. Also we need to send the payload to each AI with content, system prompt, temp, topk, topp, minp, repeat penalty. These parameters will be in an array for each of the four AIs. So maybe we have a config array like: const aiConfigs = [ {url: '', params: {...}}, ... ]; But they said "parameters will be in an array for each of the four ais." So we can define arrays. We need to send payload as JSON body. Use fetch with method POST, headers: Content-Type: application/json, body: JSON.stringify(payload). Then handle streaming: Response.body is a ReadableStream; getReader(); read loop reading chunks (Uint8Array). Convert to string using TextDecoder. Append to array and update UI. We need to run all four concurrently but not use Promise.all. We can just start them sequentially but not await each before starting next. For example: function startAI(index) { ... } Then call for i=0..3: startAI(i); That will kick off fetch calls; inside we handle reading and UI updates. We need to ensure they run concurrently, so no blocking. Also record entire response chunks in an array per AI. We also need to send the chunks in real time to 4 separate text boxes on an HTML page. So we need to have <textarea id="ai1"> etc. Then update innerText or value as new chunk arrives. We must not use dependencies, so no external libs. Also we need to handle errors. Let's produce code snippet with explanation. We'll create a function fetchAndStream(aiIndex) that returns nothing but handles reading and UI updates. We also need to define arrays for each AI's parameters. For example: const aiParams = [ {url: '', content: 'Hello', systemPrompt: 'You are ...', temp: 0.7, topk: 50, topp: 0.95, minp: 0.01, repeatPenalty: 2}, ... ]; But they said "parameters will be in an array for each of the four ais." So we can define arrays like: const aiConfigs = [ {url: '', payload: {...}}, ... ]; We need to send content, system prompt, temp, topk, topp, minp, repeat penalty. So we can create payload object accordingly. Also we need to record entire response chunks in an array per AI. We'll have const responses = [[], [], [], []]; Then push each chunk string into responses[aiIndex]. We also need to update UI: document.getElementById('output'+(i+1)).value += chunk; or innerText. Let's produce final code with comments and explanation. Also we need to ensure no Promise.all. So just call startAI for each index. Also we need to handle fetch errors gracefully. Also we need to use async/await inside each function but not block others. We can do: async function streamFromAi(index) { ... } Then call streamFromAi(0); streamFromAi(1); etc. Since they are async functions, calling them without await will start them concurrently. Alternatively we can wrap in IIFE: (async () => {...})(); But simpler: just call them. We need to ensure that the fetch calls happen concurrently; but if we use await inside each function, it won't block others because each function runs independently. So it's fine. Also we need to record entire response chunks from each AI in an array - we can push chunk string into responses[index]. Now produce final code snippet with HTML skeleton and JS script. We also need to mention that the fetch API must support streaming; some browsers may not support reading body as stream? But modern ones do. We'll provide fallback for older browsers maybe but not necessary. Also we need to ensure no dependencies, so just plain JS. Let's craft final answer: Provide explanation then code snippet.    OUTPUT: Below is a stand‑alone example that fulfils every requirement you listed:  4 independent AI calls All four streams are read concurrently (no Promise.all or any other blocking construct) Each call receives its own payload (content, systemPrompt, temp, topk, topp, minp, repeatPenalty) – the values are stored in an array of objects. Every chunk that arrives is pushed into a per‑AI array and written immediately to a dedicated <textarea> so the user can see the output live. No external libraries or imports – pure vanilla JavaScript.    1️⃣ HTML skeleton <!DOCTYPE html> <html lang="en"> <head>     <meta charset="utf-8">     <title>Concurrent AI Streaming Demo</title>     <style>         textarea { width:100%; height:150px; margin-bottom:10px;}     </style> </head> <body>     <!-- Four output boxes -->     <textarea id="output0" placeholder="AI #1 …"></textarea>     <textarea id="output1" placeholder="AI #2 …"></textarea>     <textarea id="output2" placeholder="AI #3 …"></textarea>     <textarea id="output3" placeholder="AI #4 …"></textarea>     <!-- Start button -->     <button id="startBtn">Start All 4 AIs</button>     <script src="ai-stream.js"></script>   <!-- the script below --> </body> </html>   2️⃣ JavaScript (ai-stream.js) /* -------------------------------------------------------------  * 1.  Configuration – one object per AI  * ------------------------------------------------------------- */ const aiConfigs = [     {         // URL of the first AI endpoint         url: 'https://api.example.com/v1/chat',         payload: {             content:      "Hello, what can you do?",             systemPrompt: "You are a helpful assistant.",             temp:         0.7,             topk:         50,             topp:         0.95,             minp:         0.01,             repeatPenalty: 2         }     },     {         url: 'https://api.example.com/v1/chat',         payload: {             content:      "Tell me a joke.",             systemPrompt: "You are a funny chatbot.",             temp:         0.8,             topk:         40,             topp:         0.9,             minp:         0.02,             repeatPenalty: 1         }     },     {         url: 'https://api.example.com/v1/chat',         payload: {             content:      "Explain relativity.",             systemPrompt: "You are a physics teacher.",             temp:         0.6,             topk:         60,             topp:         0.97,             minp:         0.01,             repeatPenalty: 3         }     },     {         url: 'https://api.example.com/v1/chat',         payload: {             content:      "Give me a recipe for pancakes.",             systemPrompt: "You are a cooking expert.",             temp:         0.5,             topk:         30,             topp:         0.85,             minp:         0.02,             repeatPenalty: 2         }     } ]; /* -------------------------------------------------------------  * 2.  Storage for the full responses (array of strings)  * ------------------------------------------------------------- */ const allResponses = [[], [], [], []];   // one array per AI /* -------------------------------------------------------------  * 3.  Helper – read a stream and push chunks to UI & storage  * ------------------------------------------------------------- */ async function streamFromAi(aiIndex) {     const cfg = aiConfigs[aiIndex];     const outputBox = document.getElementById(output${aiIndex});     const decoder = new TextDecoder('utf-8');     try {         // 3.1  Send the request         const response = await fetch(cfg.url, {             method: 'POST',             headers: { 'Content-Type': 'application/json' },             body: JSON.stringify(cfg.payload)         });         if (!response.ok) {             throw new Error(HTTP ${response.status} – ${response.statusText});         }         // 3.2  Get the reader         const reader = response.body.getReader();         // 3.3  Read loop – runs until stream ends         while (true) {             const { value, done } = await reader.read();             if (done) break;          // no more data             // Convert Uint8Array to string             const chunkText = decoder.decode(value, { stream: true });             // Store the chunk in the array             allResponses[aiIndex].push(chunkText);             // Push it live into the textarea             outputBox.value += chunkText;         }         // Finalise – flush any remaining buffered text         outputBox.value += decoder.decode();   // empty decode to flush     } catch (err) {         console.error(AI #${aiIndex+1} error:, err);         outputBox.value += \\n[Error] ${err.message}\\n;     } } /* -------------------------------------------------------------  * 4.  Kick‑off – start all four streams concurrently  * ------------------------------------------------------------- */ function startAllAIs() {     // Reset UI and storage     for (let i = 0; i < 4; ++i) {         document.getElementById(output${i}).value = '';         allResponses[i] = [];     }     // Start each stream – the async function is *called* but not awaited,     // so they run in parallel.     for (let i = 0; i < 4; ++i) {         streamFromAi(i);   // <-- no await     } } /* -------------------------------------------------------------  * 5.  Wire up the button  * ------------------------------------------------------------- */ document.getElementById('startBtn').addEventListener('click', startAllAIs);  How it works  Configuration – aiConfigs holds one object per AI, each with its own payload (content, systemPrompt, etc.). Storage – allResponses is an array of four arrays; every chunk that arrives for a given AI is pushed into the corresponding sub‑array. Streaming – Inside streamFromAi() we:  Send a POST request with the JSON payload. Grab the ReadableStream from response.body. Use its getReader() and read in a loop (reader.read()). Each chunk (a Uint8Array) is decoded to text, appended to the per‑AI array and written immediately into the dedicated <textarea>. The loop ends when done becomes true.  Concurrent start – In startAllAIs() we simply call streamFromAi(i) for each index without awaiting them. Because each function is async, calling it starts its own fetch and read loop immediately; all four loops run in parallel, so the streams are processed simultaneously. No external dependencies – everything uses only standard browser APIs (fetch, ReadableStream, TextDecoder, DOM methods).   What you’ll see When you click Start All 4 AIs, each <textarea> will start filling up in real time as the corresponding AI streams its response. The full text of every AI is also kept in memory (the allResponses arrays) so you can later inspect or export it if needed. Feel free to adapt the URLs, payloads, and UI layout to match your own environment. Happy streaming!",
    "quick_links": [],
    "benchmark_table_html": "",
    "readme_markdown": "---\nlicense: apache-2.0\nbase_model:\n- openai/gpt-oss-20b\nlanguage:\n- en\npipeline_tag: text-generation\ntags:\n- gpt_oss\n- gpt-oss\n- openai\n- mxfp4\n- programming\n- code generation\n- code\n- coding\n- coder\n- chat\n- code\n- chat\n- reasoning\n- thinking\n- r1\n- cot\n- deepseek\n- 128k context\n- general usage\n- problem solving\n- brainstorming\n- solve riddles\n- general usage\n- openai\n- Neo\n- MOE\n- Mixture of Experts\n- 24 experts\n- NEO Imatrix\n- Code Imatrix\n- DI-Matrix\n- Dual Imatrix\n- Imatrix\n---\n\n<small><font color=\"red\">Specialized quants (including \"MXFP4_MOE.gguf\") for new OpenAI 20B MOE - Mixture of Experts Model at 80+ t/s.</font></small>\n\n<h2>Openai_gpt-oss-20b-CODER-NEO-CODE-DI-MATRIX-GGUF</h2>\n\n<img src=\"matrix2.webp\" style=\"float:right; width:300px; height:300px; padding:10px;\"> \n\nThese are DUEL NEO Imatrix / CODE IMATRIX GGUFs, NEO dataset by DavidAU with \"Code\" dataset compiled by DavidAU.\n\nNEO dataset improves overall performance. \n\nCODER dataset is specifically for coding performance.\n\nExample generation provided at bottom of this page.\n\nDUEL (\"DI\")-> Separate Imatrix datasets (\"NEO\" and \"CODER\" - generated separately per model) are co-joined to create a new Imatrix dataset, which is then applied to the quants.\n\nModel also passed \"hard\" coding test too (4 experts); no issues (IQ4_NL).\n\nTEST: Forcing the model to create code with no dependencies and limits of coding short cuts, with multiple loops, and in real time with no blocking in a language that does not support it normally.\n\n(example prompt, and generation below)\n\nDue to quanting issues with this model (which result in oddball quant sizes / mixtures), only TESTED quants will be uploaded (at the moment).\n\nCurrently that means IQ4_NL, and <B>MXFP4_MOE</b> (a new OpenAI specific quant type) are available.\n\nNEO/Coder datasets performance improvements will show the most in the IQ4_NL quants.\n\nThere are TWO \"IQ4_NL\" quants:\n- OpenAI-20B-NEO-CODE-DIMAT-IQ4_NL.gguf : DI Imatrix applied.\n- OpenAI-20B-NEO-CODE-DIMAT-2-IQ4_NL.gguf : DI Imatrix applied, including output tensor (also imatrixed), and embed tensor at IQ4_NL.\n\nThere are THREE NEO MXFP4_MOE quants:\n- OpenAI-20B-NEO-CODE-DIMAT-MXFP4_MOE2.gguf : Output tensor Q5_1 (DI Imatrix applied)\n- OpenAI-20B-NEO-CODE-DIMAT-MXFP4_MOE3.gguf : Output tensor IQ4_NL (DI Imatrix applied)\n- OpenAI-20B-NEO-CODE-DIMAT-MXFP4_MOE4.gguf : Output tensor IQ4_NL (DI Imatrix applied) AND Embed at IQ4_NL - this makes this quant the smallest version.\n\nMXFP4_MOE quants vastly outperform (at the moment) all other quants, except IQ4_NL, Q5_1 and Q8_0 due to odd\nissues compressing OpenAI's 20B model due to odd \"tensor\" dimensions. \n\n( IQ4_NL, Q5_1 and Q8_0 quants are compatible with OpenAI's tensor structure as of this writing. )\n\nMXFP4_MOE quant was specifically designed for (what appears to be) loss less quantization relative to source model. Jury still out on this.\n\nSuggested Settings (tested in Lmstudio, Beta Branch 0.3.21 ; 4 ):\n\n- Context: 8k min.\n- Temp 1.2+ for creative. Temp .6 (or so) for coding/general.\n- Rep pen 1.1, topk 40, topp .95, min p 0.05\n- Experts 4-8 depending on use case. (higher than 8 MAY lower quality)\n\nModel Supports:\n- 128k context\n- up to 24 experts\n- Tools use, browsing, etc \n\nFor my help docs, SETTING NUMBER OF EXPERTS, and other see below.\n\nSee more about this model here:\n\nhttps://huggingface.co/openai/gpt-oss-20b\n\nPlease refer to their model card, especially to control \"thinking\" levels.\n\n---\n\n<H2>Help, Adjustments, Samplers, Parameters and More</H2>\n\n---\n\n<B>CHANGE THE NUMBER OF ACTIVE EXPERTS:</B>\n\nSee this document:\n\nhttps://huggingface.co/DavidAU/How-To-Set-and-Manage-MOE-Mix-of-Experts-Model-Activation-of-Experts\n\n<B>Settings: CHAT / ROLEPLAY and/or SMOOTHER operation of this model:</B>\n\nIn \"KoboldCpp\" or  \"oobabooga/text-generation-webui\" or \"Silly Tavern\" ;\n\nSet the \"Smoothing_factor\" to 1.5 \n\n: in KoboldCpp -> Settings->Samplers->Advanced-> \"Smooth_F\"\n\n: in text-generation-webui -> parameters -> lower right.\n\n: In Silly Tavern this is called: \"Smoothing\"\n\n\nNOTE: For \"text-generation-webui\" \n\n-> if using GGUFs you need to use \"llama_HF\" (which involves downloading some config files from the SOURCE version of this model)\n\nSource versions (and config files) of my models are here:\n\nhttps://huggingface.co/collections/DavidAU/d-au-source-files-for-gguf-exl2-awq-gptq-hqq-etc-etc-66b55cb8ba25f914cbf210be\n\nOTHER OPTIONS:\n\n- Increase rep pen to 1.1 to 1.15 (you don't need to do this if you use \"smoothing_factor\")\n\n- If the interface/program you are using to run AI MODELS supports \"Quadratic Sampling\" (\"smoothing\") just make the adjustment as noted.\n\n<B>Highest Quality Settings / Optimal Operation Guide / Parameters and Samplers</B>\n\nThis a \"Class 1\" model:\n\nFor all settings used for this model (including specifics for its \"class\"), including example generation(s) and for advanced settings guide (which many times addresses any model issue(s)), including methods to improve model performance for all use case(s) as well as chat, roleplay and other use case(s) please see:\n\n[ https://huggingface.co/DavidAU/Maximizing-Model-Performance-All-Quants-Types-And-Full-Precision-by-Samplers_Parameters ]\n\nYou can see all parameters used for generation, in addition to advanced parameters and samplers to get the most out of this model here:\n\n[ https://huggingface.co/DavidAU/Maximizing-Model-Performance-All-Quants-Types-And-Full-Precision-by-Samplers_Parameters ]\n\n---\n\n<h2>Example Generation</h2>\n\nUsing default settings (coder), 4 experts and no system prompt.\n\n---\n\nPrompt:\n\n<b>\n\nWrite a JavaScript for fetch api using 4 ais, all using streaming that does NOT use \"promise.all\", and processes all streams separately but in real time - that means all streams need to be processed at the same time and not interrupt each other.\n\nAlso include sending a payload to each of the 4 ais with content, system prompt, temp, topk, topp, minp, repeat penalty ; all of these parameters will be in an array for each of the four ais.\n\nRecord the entire response - chunks - from each AI in an array - text.\n\nAlso, send the chunks in real time to 4 separate text boxes on an HTML page so real time readout from each AI can be seen by the user.\n\nIMPORTANT: All streams must be processed at the same time, not in sequence. IMPORTANT: Do not use any dependencies, nor import any module(s).\n\n</b>\n\nOUTPUT: \n\n(note: Pretty print, color and some formatting lost on copy/paste)\n\n<p style=\"border: none; padding: 0cm\">\n<span style=\"display: inline-block; border: none; padding: 0cm\"><font color=\"#ff0000\"><b>Thought\nfor 11.81 seconds</b></font></span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nneed to write JavaScript code that uses fetch API with streaming\nresponses (likely using ReadableStream from\nResponse.body.getReader()). We have 4 AI endpoints; each will be\ncalled with a payload containing content, system prompt, temp, topk,\ntopp, minp, repeat penalty. These parameters are in an array for each\nof the four AIs.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nneed to process all streams concurrently, not sequentially, and not\nusing Promise.all. So we can start fetch calls, get readers, then\nread from each reader in separate async functions that run\nconcurrently (like starting them but not awaiting). We need to send\nchunks in real time to 4 separate text boxes on an HTML page.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\ncannot use dependencies or import modules; just plain JS.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nneed to record entire response chunks per AI into arrays. So we\nmaintain array of strings for each AI, push each chunk as it arrives.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Also\nwe need to send the payload to each AI with content, system prompt,\ntemp, topk, topp, minp, repeat penalty. These parameters will be in\nan array for each of the four AIs. So maybe we have a config array\nlike:</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">const\naiConfigs = [ {url: '', params: {...}}, ... ];</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">But\nthey said &quot;parameters will be in an array for each of the four\nais.&quot; So we can define arrays.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nneed to send payload as JSON body. Use fetch with method POST,\nheaders: Content-Type: application/json, body:\nJSON.stringify(payload).</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Then\nhandle streaming: Response.body is a ReadableStream; getReader();\nread loop reading chunks (Uint8Array). Convert to string using\nTextDecoder. Append to array and update UI.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nneed to run all four concurrently but not use Promise.all. We can\njust start them sequentially but not await each before starting next.\nFor example:</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">function\nstartAI(index) { ... } Then call for i=0..3: startAI(i); That will\nkick off fetch calls; inside we handle reading and UI updates.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nneed to ensure they run concurrently, so no blocking.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Also\nrecord entire response chunks in an array per AI.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nalso need to send the chunks in real time to 4 separate text boxes on\nan HTML page. So we need to have &lt;textarea id=&quot;ai1&quot;&gt;\netc. Then update innerText or value as new chunk arrives.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nmust not use dependencies, so no external libs.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Also\nwe need to handle errors.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Let's\nproduce code snippet with explanation.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We'll\ncreate a function fetchAndStream(aiIndex) that returns nothing but\nhandles reading and UI updates.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nalso need to define arrays for each AI's parameters. For example:</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">const\naiParams = [ {url: '', content: 'Hello', systemPrompt: 'You are ...',\ntemp: 0.7, topk: 50, topp: 0.95, minp: 0.01, repeatPenalty: 2}, ...\n];</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">But\nthey said &quot;parameters will be in an array for each of the four\nais.&quot; So we can define arrays like:</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">const\naiConfigs = [ {url: '', payload: {...}}, ... ];</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nneed to send content, system prompt, temp, topk, topp, minp, repeat\npenalty. So we can create payload object accordingly.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Also\nwe need to record entire response chunks in an array per AI. We'll\nhave const responses = [[], [], [], []]; Then push each chunk string\ninto responses[aiIndex].</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nalso need to update UI: document.getElementById('output'+(i+1)).value\n+= chunk; or innerText.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Let's\nproduce final code with comments and explanation.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Also\nwe need to ensure no Promise.all. So just call startAI for each\nindex.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Also\nwe need to handle fetch errors gracefully.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Also\nwe need to use async/await inside each function but not block others.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\ncan do:</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">async\nfunction streamFromAi(index) { ... }</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Then\ncall streamFromAi(0); streamFromAi(1); etc. Since they are async\nfunctions, calling them without await will start them concurrently.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Alternatively\nwe can wrap in IIFE: (async () =&gt; {...})(); But simpler: just call\nthem.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nneed to ensure that the fetch calls happen concurrently; but if we\nuse await inside each function, it won't block others because each\nfunction runs independently. So it's fine.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Also\nwe need to record entire response chunks from each AI in an array -\nwe can push chunk string into responses[index].</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Now\nproduce final code snippet with HTML skeleton and JS script.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We\nalso need to mention that the fetch API must support streaming; some\nbrowsers may not support reading body as stream? But modern ones do.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">We'll\nprovide fallback for older browsers maybe but not necessary.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Also\nwe need to ensure no dependencies, so just plain JS.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Let's\ncraft final answer: Provide explanation then code snippet.</span></p>\n<p style=\"border: none; padding: 0cm\"><br/>\n<br/>\n\n</p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\"><font color=\"#ff0000\"><b>OUTPUT:</b></font></span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Below\nis a <strong>stand&#8209;alone</strong> example that fulfils every\nrequirement you listed:</span></p>\n<ul>\n\t<li><p style=\"margin-bottom: 0cm; border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">4\n\tindependent AI calls</span></p></li>\n\t<li><p style=\"margin-bottom: 0cm; border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">All\n\tfour streams are read&nbsp;<em>concurrently</em>&nbsp;(no&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">Promise.all</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">&nbsp;or\n\tany other blocking construct)</span></p></li>\n\t<li><p style=\"margin-bottom: 0cm; border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Each\n\tcall receives its own payload\n\t(</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">content</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">,&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">systemPrompt</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">,&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">temp</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">,&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">topk</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">,&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">topp</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">,&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">minp</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">,&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">repeatPenalty</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">)\n\t– the values are stored in an array of objects.</span></p></li>\n\t<li><p style=\"margin-bottom: 0cm; border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Every\n\tchunk that arrives is pushed into a per&#8209;AI array and written\n\timmediately to a dedicated&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">&lt;textarea&gt;</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">&nbsp;so\n\tthe user can see the output live.</span></p></li>\n\t<li><p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">No\n\texternal libraries or imports – pure vanilla JavaScript.</span></p></li>\n</ul>\n<hr/>\n\n<h2 class=\"western\" style=\"border-top: none; border-bottom: 1px solid #3b3b3b; border-left: none; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0cm; padding-right: 0cm\">\n<span style=\"display: inline-block; border: none; padding: 0cm\">1️⃣\nHTML skeleton</span></h2>\n<pre class=\"western\" style=\"border: 1px solid #3b3b3b; padding: 0.05cm\"><span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">&lt;!DOCTYPE html&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">&lt;html lang=&quot;en&quot;&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">&lt;head&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;meta charset=&quot;utf-8&quot;&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;title&gt;Concurrent AI Streaming Demo&lt;/title&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;style&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">textarea { width:100%; height:150px; margin-bottom:10px;}</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;/style&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">&lt;/head&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">&lt;body&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;!-- Four output boxes --&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;textarea id=&quot;output0&quot; placeholder=&quot;AI #1 …&quot;&gt;&lt;/textarea&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;textarea id=&quot;output1&quot; placeholder=&quot;AI #2 …&quot;&gt;&lt;/textarea&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;textarea id=&quot;output2&quot; placeholder=&quot;AI #3 …&quot;&gt;&lt;/textarea&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;textarea id=&quot;output3&quot; placeholder=&quot;AI #4 …&quot;&gt;&lt;/textarea&gt;</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;!-- Start button --&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;button id=&quot;startBtn&quot;&gt;Start All 4 AIs&lt;/button&gt;</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">&lt;script src=&quot;ai-stream.js&quot;&gt;&lt;/script&gt;   &lt;!-- the script below --&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">&lt;/body&gt;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">&lt;/html&gt;</code></span></pre>\n<hr/>\n\n<h2 class=\"western\" style=\"border-top: none; border-bottom: 1px solid #3b3b3b; border-left: none; border-right: none; padding-top: 0cm; padding-bottom: 0.05cm; padding-left: 0cm; padding-right: 0cm\">\n<span style=\"display: inline-block; border: none; padding: 0cm\">2️⃣\nJavaScript (</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">ai-stream.js</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">)</span></h2>\n<pre class=\"western\" style=\"border: 1px solid #3b3b3b; padding: 0.05cm\"><span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">/* -------------------------------------------------------------</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\"> </code><code class=\"western\">* 1.  Configuration – one object per AI</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\"> </code><code class=\"western\">* ------------------------------------------------------------- */</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">const aiConfigs = [</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">{</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">// URL of the first AI endpoint</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">url: 'https://api.example.com/v1/chat',</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">payload: {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">content:      &quot;Hello, what can you do?&quot;,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">systemPrompt: &quot;You are a helpful assistant.&quot;,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">temp:         0.7,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">topk:         50,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">topp:         0.95,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">minp:         0.01,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">repeatPenalty: 2</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">}</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">},</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">{</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">url: 'https://api.example.com/v1/chat',</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">payload: {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">content:      &quot;Tell me a joke.&quot;,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">systemPrompt: &quot;You are a funny chatbot.&quot;,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">temp:         0.8,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">topk:         40,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">topp:         0.9,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">minp:         0.02,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">repeatPenalty: 1</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">}</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">},</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">{</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">url: 'https://api.example.com/v1/chat',</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">payload: {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">content:      &quot;Explain relativity.&quot;,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">systemPrompt: &quot;You are a physics teacher.&quot;,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">temp:         0.6,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">topk:         60,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">topp:         0.97,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">minp:         0.01,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">repeatPenalty: 3</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">}</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">},</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">{</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">url: 'https://api.example.com/v1/chat',</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">payload: {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">content:      &quot;Give me a recipe for pancakes.&quot;,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">systemPrompt: &quot;You are a cooking expert.&quot;,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">temp:         0.5,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">topk:         30,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">topp:         0.85,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">minp:         0.02,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">repeatPenalty: 2</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">}</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">}</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">];</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">/* -------------------------------------------------------------</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\"> </code><code class=\"western\">* 2.  Storage for the full responses (array of strings)</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\"> </code><code class=\"western\">* ------------------------------------------------------------- */</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">const allResponses = [[], [], [], []];   // one array per AI</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">/* -------------------------------------------------------------</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\"> </code><code class=\"western\">* 3.  Helper – read a stream and push chunks to UI &amp; storage</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\"> </code><code class=\"western\">* ------------------------------------------------------------- */</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">async function streamFromAi(aiIndex) {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">const cfg = aiConfigs[aiIndex];</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">const outputBox = document.getElementById(`output${aiIndex}`);</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">const decoder = new TextDecoder('utf-8');</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">try {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">// 3.1  Send the request</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">const response = await fetch(cfg.url, {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">method: 'POST',</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">headers: { 'Content-Type': 'application/json' },</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">body: JSON.stringify(cfg.payload)</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">});</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">if (!response.ok) {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">throw new Error(`HTTP ${response.status} – ${response.statusText}`);</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">}</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">// 3.2  Get the reader</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">const reader = response.body.getReader();</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">// 3.3  Read loop – runs until stream ends</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">while (true) {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">const { value, done } = await reader.read();</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">if (done) break;          // no more data</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">// Convert Uint8Array to string</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">const chunkText = decoder.decode(value, { stream: true });</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">// Store the chunk in the array</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">allResponses[aiIndex].push(chunkText);</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">// Push it live into the textarea</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">            </code><code class=\"western\">outputBox.value += chunkText;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">}</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">// Finalise – flush any remaining buffered text</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">outputBox.value += decoder.decode();   // empty decode to flush</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">} catch (err) {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">console.error(`AI #${aiIndex+1} error:`, err);</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">outputBox.value += `\\n[Error] ${err.message}\\n`;</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">}</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">}</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">/* -------------------------------------------------------------</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\"> </code><code class=\"western\">* 4.  Kick&#8209;off – start all four streams concurrently</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\"> </code><code class=\"western\">* ------------------------------------------------------------- */</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">function startAllAIs() {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">// Reset UI and storage</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">for (let i = 0; i &lt; 4; ++i) {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">document.getElementById(`output${i}`).value = '';</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">allResponses[i] = [];</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">}</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">// Start each stream – the async function is *called* but not awaited,</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">// so they run in parallel.</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">for (let i = 0; i &lt; 4; ++i) {</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">        </code><code class=\"western\">streamFromAi(i);   // &lt;-- no await</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">    </code><code class=\"western\">}</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">}</code></span>\n\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">/* -------------------------------------------------------------</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\"> </code><code class=\"western\">* 5.  Wire up the button</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\"> </code><code class=\"western\">* ------------------------------------------------------------- */</code></span>\n<span style=\"display: inline-block; border: none; padding: 0cm\"><code class=\"western\">document.getElementById('startBtn').addEventListener('click', startAllAIs);</code></span></pre>\n<hr/>\n\n<h3 class=\"western\" style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">How\nit works</span></h3>\n<ol>\n\t<li><p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\"><strong>Configuration</strong>\n\t– </span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">aiConfigs</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">\n\tholds one object per AI, each with its own payload (</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">content</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">,\n\t</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">systemPrompt</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">,\n\tetc.).</span></p></li>\n\t<li><p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\"><strong>Storage</strong>\n\t– </span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">allResponses</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">\n\tis an array of four arrays; every chunk that arrives for a given AI\n\tis pushed into the corresponding sub&#8209;array.</span></p></li>\n\t<li><p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\"><strong>Streaming</strong>\n\t– Inside </span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">streamFromAi()</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">\n\twe:</span></p>\n\t<ul>\n\t\t<li><p style=\"margin-bottom: 0cm; border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Send\n\t\ta POST request with the JSON payload.</span></p></li>\n\t\t<li><p style=\"margin-bottom: 0cm; border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Grab\n\t\tthe&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">ReadableStream</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">&nbsp;from&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">response.body</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">.</span></p></li>\n\t\t<li><p style=\"margin-bottom: 0cm; border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Use\n\t\tits&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">getReader()</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">&nbsp;and\n\t\tread in a loop (</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">reader.read()</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">).</span></p></li>\n\t\t<li><p style=\"margin-bottom: 0cm; border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Each\n\t\tchunk (a&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">Uint8Array</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">)\n\t\tis decoded to text, appended to the per&#8209;AI array&nbsp;<strong>and</strong>&nbsp;written\n\t\timmediately into the dedicated&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">&lt;textarea&gt;</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">.</span></p></li>\n\t\t<li><p style=\"margin-bottom: 0cm; border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">The\n\t\tloop ends when&nbsp;</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">done</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">&nbsp;becomes\n\t\ttrue.</span></p></li>\n\t</ul>\n\t<li><p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\"><strong>Concurrent\n\tstart</strong> – In </span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">startAllAIs()</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">\n\twe simply call </span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">streamFromAi(i)</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">\n\tfor each index without awaiting them. Because each function is\n\tasync, calling it starts its own fetch and read loop immediately;\n\tall four loops run in parallel, so the streams are processed\n\t<em>simultaneously</em>.</span></p></li>\n\t<li><p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\"><strong>No\n\texternal dependencies</strong> – everything uses only standard\n\tbrowser APIs (</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">fetch</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">,\n\t</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">ReadableStream</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">,\n\t</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">TextDecoder</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">,\n\tDOM methods).</span></p></li>\n</ol>\n<hr/>\n\n<h3 class=\"western\" style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">What\nyou’ll see</span></h3>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">When\nyou click <strong>Start All 4 AIs</strong>, each </span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">&lt;textarea&gt;</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">\nwill start filling up in real time as the corresponding AI streams\nits response. The full text of every AI is also kept in memory (the\n</span><span style=\"display: inline-block; border: 1px solid #3b3b3b; padding: 0.05cm\"><code class=\"western\">allResponses</code></span><span style=\"display: inline-block; border: none; padding: 0cm\">\narrays) so you can later inspect or export it if needed.</span></p>\n<p style=\"border: none; padding: 0cm\"><span style=\"display: inline-block; border: none; padding: 0cm\">Feel\nfree to adapt the URLs, payloads, and UI layout to match your own\nenvironment. Happy streaming!</span></p>\n<p style=\"line-height: 100%; margin-bottom: 0cm\"><br/>\n\n</p>",
    "related_quantizations": []
  },
  "tags": [
    "gguf",
    "gpt_oss",
    "gpt-oss",
    "openai",
    "mxfp4",
    "programming",
    "code generation",
    "code",
    "coding",
    "coder",
    "chat",
    "reasoning",
    "thinking",
    "r1",
    "cot",
    "deepseek",
    "128k context",
    "general usage",
    "problem solving",
    "brainstorming",
    "solve riddles",
    "Neo",
    "MOE",
    "Mixture of Experts",
    "24 experts",
    "NEO Imatrix",
    "Code Imatrix",
    "DI-Matrix",
    "Dual Imatrix",
    "Imatrix",
    "text-generation",
    "en",
    "base_model:openai/gpt-oss-20b",
    "base_model:quantized:openai/gpt-oss-20b",
    "license:apache-2.0",
    "endpoints_compatible",
    "region:us",
    "imatrix",
    "conversational"
  ],
  "likes": 14,
  "downloads": 1037,
  "gated": false,
  "private": false,
  "last_modified": "2025-08-07T04:23:54.000Z",
  "created_at": "2025-08-06T05:23:38.000Z",
  "pipeline_tag": "text-generation",
  "library_name": ""
}

{
  "_id": "6892e6da2d9ce6063a8693fc",
  "id": "DavidAU/Openai_gpt-oss-20b-CODER-NEO-CODE-DI-MATRIX-GGUF",
  "modelId": "DavidAU/Openai_gpt-oss-20b-CODER-NEO-CODE-DI-MATRIX-GGUF",
  "sha": "d0386f220c393f553cc364f90a09a9800d8e36b5",
  "createdAt": "2025-08-06T05:23:38.000Z",
  "lastModified": "2025-08-07T04:23:54.000Z",
  "author": "DavidAU",
  "downloads": 1037,
  "likes": 14,
  "gated": false,
  "private": false,
  "pipeline_tag": "text-generation",
  "library_name": "",
  "siblings_count": 8
}