Added Automatic1111 api articles.

randombits-dev · Jan 12, 2024 · 93345a9 · 93345a9
1 parent 2b14695
commit 93345a9
Show file tree

Hide file tree

Showing 9 changed files with 113 additions and 174 deletions.
diff --git a/.astro/types.d.ts b/.astro/types.d.ts
@@ -324,13 +324,6 @@ declare module 'astro:content' {
 } & { render(): Render[".mdx"] };
 };
 "stable-diffusion": {
-"all-params.mdx": {
-	id: "all-params.mdx";
-  slug: "all-params";
-  body: string;
-  collection: "stable-diffusion";
-  data: InferEntrySchema<"stable-diffusion">
-} & { render(): Render[".mdx"] };
 "api.mdx": {
 	id: "api.mdx";
   slug: "api";

diff --git a/src/components/article/ArticleTOC.tsx b/src/components/article/ArticleTOC.tsx
@@ -19,15 +19,14 @@ const ArticleTOC = ({path, relatedPages, headings}) => {
 
     const handleClickHeading = (heading) => {
         setSelected(heading.slug);
-        // document.querySelector()
-        // document.querySelector(`a[href="#${heading.slug}"]`).classList.add('bg-header');
     };
 
     if (relatedPages) {
         return <nav aria-label="Table of Contents" class="card rb-article__nav" ref={el}>
             {
                 relatedPages.sort((a, b) => a.data.order - b.data.order).map(article => {
-                    const showLink = path.endsWith(article.slug);
+
+                    const showLink = path === article.slug;
                     if (showLink) {
                         return <><a class="font-bold"  aria-selected={!selected()} href={article.slug}>{article.data.toc || article.data.title}</a>
                             <div class="rb-article__sub-nav">

diff --git a/src/content/stable-diffusion/all-params.mdx b/src/content/stable-diffusion/all-params.mdx
diff --git a/src/content/stable-diffusion/api.mdx b/src/content/stable-diffusion/api.mdx
@@ -1,24 +1,13 @@
 ---
-title: "API"
+title: "Introduction to the API"
 metaTitle: "Using the Automatic1111 API | Stable Diffusion in the Cloud"
 desc: "A guide to using the Automatic1111 API to run stable diffusion from an app or a batch process"
 updated: 2024-01-09
 img: './4planets.jpg'
 order: 4
 ---
 
-
-
-
-
-
-
-
-
-import ParamTable from "../../components/automatic1111/ParamTable";
-
-
-## Reasons to use the Automatic1111 API
+## Reasons to use the API
 
 **1. Automated Processes**. You can create a script that generates images while you do other things. The script can randomize parameters to achieve different results. Or the script could go through a list of prompts and generates images for each prompt.
 
@@ -34,102 +23,9 @@ stable-diffusion-webui/webui.sh --listen --xformers --api
 
 All endpoints are located at: `/sdapi/v1/*`. For example, `http://localhost:7860/sdapi/v1/txt2img`.
 
-The official api spec can be seen by going to `/docs` on your server, but there doesn't seem to
-
-[//]: # (## Endpoints)
-
-[//]: # ()
-[//]: # ([txt2img]&#40;txt2img&#41;)
-
-## txt2img
-
-Generate an image using a text prompt.
-
-> POST /sdapi/v1/txt2img
-
-### Basic Params
-
-Include these params in the body of your post request.
-
-```json
-{
-  "prompt": "Sunset in the mountains, lake in front",
-  "negative_prompt": "clouds, people",
-  "sampler_name": "Euler",
-  "steps": 20,
-  "cfg_scale": 7,
-  "height": 512,
-  "width": 512
-}
-```
-
-### Higher Resolution
-To increase the resolution of the generated image, add the following params:
-
-```json
-{
-  "enable_hr": true,
-  "hr_scale": 2,
-  "denoising_strength": 0.7,
-  "hr_second_pass_steps": 10,
-  "hr_upscaler": "R-ESRGAN"
-}
-```
-
-The `hr-scale` param multiplies the specified width and height (if the base resolution is 512x512, and the hr_scale is 2, then the output will be 1024x1024)
-
-[//]: # ()
-[//]: # (### Full list of params)
-
-[//]: # ()
-[//]: # (See the [full list of params]&#40;all-params#txt2img&#41;)
-
-### Output
-
-Your response will be simpler to the following:
-
-```json
-
-```
-
-The result will contain a list of output images. The number of images depends on what you specified for a batch size. The images are in base64 format, and therefore need to be decoded and saved to the file system as normal images:
-
-```js
-result.images.forEach((img, i) => {
-  const buf = Buffer.from(img, 'base64');
-  fs.writeFileSync(`image-${i}.png`, buf);
-});
-
-```
-
-### Full Javascript Example
-
-```js
-const result = await fetch('[server]:7860/sdapi/v1/txt2img', {
-  method: 'POST',
-  body: JSON.stringify({
-    prompt: "Sunset in the mountains, lake in front",
-    negative_prompt: "clouds, people",
-    sampler_name: "Euler",
-    steps: 20,
-    cfg_scale: 7,
-    height: 512,
-    width: 512
-  })
-}).then(res => res.json());
-result.images.forEach((img, i) => {
-  const buf = Buffer.from(img, 'base64');
-  fs.writeFileSync(`image-${i}.png`, buf);
-});
-```
-
-### Full List of Params
-
-<ParamTable type="txt2img"/>
-
-
-
-
+The official api spec can be seen by going to `/docs` on your server, but it is very basic.
 
-Description of each parameter:
+## Endpoint Guides
 
+* [Text to Image (txt2img)](txt2img)
+* [ControlNet Api](controlnet-api)
diff --git a/src/content/stable-diffusion/controlnet-api.mdx b/src/content/stable-diffusion/controlnet-api.mdx
@@ -5,16 +5,12 @@ desc: "A guide to using the Automatic1111 API to run stable diffusion from an ap
 updated: 2024-01-09
 img: './4planets.jpg'
 order: 6
+hide: true
 ---
 
 
 
 
-
-
-
-
-
 import ParamTable from "../../components/automatic1111/ParamTable";
 
 ## Intro
@@ -25,7 +21,7 @@ ControlNet allows users to control the generation process of stable diffusion im
 
 ## Encode Input in Base64
 
-Since we need to send an image to our server, we need to encode the image in base64. This example uses nodejs:
+Since we need to send an image to our server, we need to encode the image in base64. This example uses javascript:
 
 ```js
 const buf = fs.readFileSync('my-file.png');
@@ -36,8 +32,12 @@ const myBase64EncodedImage = Buffer.from(buf).toString('base64')
 
 > POST /sdapi/v1/txt2img
 
+To use ControlNet, we use the same `txt2img` endpoint, but we pass in extra params:
+
 ```json
 {
+  "prompt": "Sunset in the mountains, lake in front",
+  // other txt2img params
   "alwayson_scripts": {
     "controlnet": {
       "args": [
@@ -58,12 +58,12 @@ The **module** param is the name of the preprocessor to use.
 
 The **model** param should be set to the name of a ControlNet model you have installed. For example, if your model name is called `depth_fp16.safetensors`, the value should be `depth_fp16`.
 
-### Full List of Params
+## Response
 
-<ParamTable type="controlnet"/>
+See the [txt2img](txt2img#response) guide for response examples
 
-## Response
+## Full List of Params
 
-See the [txt2img](txt2img) guide for response examples
+<ParamTable type="controlnet"/>
 
 
diff --git a/src/content/stable-diffusion/txt2img.mdx b/src/content/stable-diffusion/txt2img.mdx
@@ -1,6 +1,6 @@
 ---
-title: "txt2img"
-metaTitle: "txt2img api guide for automatic1111"
+title: "Text-to-Image API"
+metaTitle: "Text to Image"
 desc: "A guide to using the automatic1111 txt2img endpoint"
 updated: 2024-01-09
 img: './4planets.jpg'
@@ -9,6 +9,8 @@ hide: true
 ---
 
 
+
+
 import ParamTable from "@/components/automatic1111/ParamTable";
 
 The txt2img endpoint will generate an image based on a text prompt. This is the most commonly used endpoint.
@@ -46,30 +48,97 @@ To increase the resolution of the generated image, add the following params:
 
 The `hr-scale` param multiplies the specified width and height (if the base resolution is 512x512, and the hr_scale is 2, then the output will be 1024x1024)
 
-## Control Net
+## Response
 
-If you have the Control Net extension installed, you can pass input images/poses using the following params:
+Your response will contain an array of output images, and the values of all the parameters it used to generate the images:
 
 ```json
 {
-  "alwayson_scripts": {
-    "controlnet": {
-      "args": [
-        {
-          "input_image": myBase64EncodedImage,
-          "model": "depth",
-          "module": "depth",
-          "resize_mode": "Envelope (Outer Fit)", // Scale to Fit (Inner Fit) | Just Resize
-          "control_mode": "ControlNet is more important" // Balanced | My prompt is more important
-        }
-      ]
-    }
+  "images": ["iVBORw0KGgoAAAANSUhEUgAAA..."],
+  "parameters": {
+    "enable_hr": false,
+    "denoising_strength": 0,
+    "firstphase_width": 0,
+    "firstphase_height": 0,
+    "hr_scale": 2.0,
+    "hr_upscaler": null,
+    "hr_second_pass_steps": 0,
+    "hr_resize_x": 0,
+    "hr_resize_y": 0,
+    "prompt": "Astronaut planting a flag on the moon",
+    "styles": null,
+    "seed": -1,
+    "subseed": -1,
+    "subseed_strength": 0,
+    "seed_resize_from_h": -1,
+    "seed_resize_from_w": -1,
+    "sampler_name": null,
+    "batch_size": 1,
+    "n_iter": 1,
+    "steps": 20,
+    "cfg_scale": 7.0,
+    "width": 512,
+    "height": 512,
+    "restore_faces": false,
+    "tiling": false,
+    "do_not_save_samples": false,
+    "do_not_save_grid": false,
+    "negative_prompt": "",
+    "eta": null,
+    "s_min_uncond": 0.0,
+    "s_churn": 0.0,
+    "s_tmax": null,
+    "s_tmin": 0.0,
+    "s_noise": 1.0,
+    "override_settings": null,
+    "override_settings_restore_afterwards": true,
+    "script_args": [],
+    "sampler_index": "Euler",
+    "script_name": null,
+    "send_images": true,
+    "save_images": false,
+    "alwayson_scripts": {}
   }
 }
 ```
 
+The number of images depends on what you specified for a batch size. The images are in base64 format, and therefore need to be decoded and saved to the file system as normal images:
+
+```js
+result.images.forEach((img, i) => {
+  const buf = Buffer.from(img, 'base64');
+  fs.writeFileSync(`image-${i}.png`, buf);
+});
+
+```
+
+## Full Example
+
+Here is a full javascript (nodejs) example:
+
+```js
+const result = await fetch('[server]:7860/sdapi/v1/txt2img', {
+  method: 'POST',
+  body: JSON.stringify({
+    prompt: "Sunset in the mountains, lake in front",
+    negative_prompt: "clouds, people",
+    sampler_name: "Euler",
+    steps: 20,
+    cfg_scale: 7,
+    height: 512,
+    width: 512
+  })
+}).then(res => res.json());
+result.images.forEach((img, i) => {
+  const buf = Buffer.from(img, 'base64');
+  fs.writeFileSync(`image-${i}.png`, buf);
+});
+```
+
+
+## Control Net
 
-The model and module can be any of the models installed in the Control Net extension. The input_image should be a base64 encoded image.
+See the [ControlNet API](controlnet-api) guide for sending in a control input image
 
 ## Full List of params
 

diff --git a/src/pages/articles/[group]/[...slug].astro b/src/pages/articles/[group]/[...slug].astro
@@ -1,9 +1,9 @@
 ---
+import {getPathEnd} from "../../../utils/utils";
 import {getCollection} from 'astro:content';
 import BlogSidebar from "../../../layouts/BlogSidebar.astro";
 import ArticleTOC from "../../../components/article/ArticleTOC";
 import {ARTICLE_GROUPS} from "../../../data/article-groups";
-import {removeTrailingSlash} from "../../../utils/utils";
 
 export async function getStaticPaths() {
   const entries = [];
@@ -20,7 +20,7 @@ const {entry, group} = Astro.props;
 const {Content, headings} = await entry.render();
 const h2Headings = headings.filter(h => h.depth === 2);
 const articles = (await getCollection(group));
-const path = removeTrailingSlash(Astro.url.pathname);
+const path = getPathEnd(Astro.url.pathname);
 const groupName = ARTICLE_GROUPS.find(g => g[0] === group)[1];
 ---
 <BlogSidebar content={entry.data} group={groupName}>