Make it better. Further improve the ui and ux. Position all of the ui elements correctly on all dimensions. Make it more better looking and feel. Send the full improved code. -- <!DOCTYPE html>
<html lang="en">
<head>
    <!-- Essential Meta Tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AbhiModels API Documentation</title>
    <meta name="description" content="Comprehensive API documentation for AbhiModels - Cutting-edge AI solutions for image generation, voice synthesis, chat, video creation, and more.">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

    <!-- Icons (Font Awesome) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
          crossorigin="anonymous" referrerpolicy="no-referrer" />

    <!-- Styles -->
    <style>
        :root {
            /* Color Palette */
            --primary-color: #6C63FF;
            --secondary-color: #FFFFFF;
            --accent-color: #FF6584;
            --text-color: #333333;
            --background-color: #F5F5F5;
            --header-background: #FFFFFF;
            --sidebar-background: #2C2C2C;
            --footer-background: #1F1F1F;
            --button-gradient: linear-gradient(135deg, #6C63FF, #5A54E7);
            --code-background: #f4f4f4;
            --code-border: #e1e1e1;

            /* Typography */
            --font-family: 'Roboto', sans-serif;
            --heading-font-weight: 700;
            --body-font-weight: 400;
            --transition-speed: 0.3s;
            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --container-width: 90%;
            --max-container-width: 1200px;
        }

        /* Reset Styles */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: var(--font-family);
            color: var(--text-color);
            background-color: var(--background-color);
            line-height: 1.6;
            display: flex;
            min-height: 100vh;
        }

        a {
            text-decoration: none;
            color: inherit;
            cursor: pointer;
        }

        ul {
            list-style-type: none;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }

        /* Sidebar */
        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            width: 250px;
            height: 100%;
            background-color: var(--sidebar-background);
            color: var(--secondary-color);
            padding: 2rem 1rem;
            overflow-y: auto;
            transition: transform var(--transition-speed);
            z-index: 1000;
        }

        .sidebar.hidden {
            transform: translateX(-100%);
        }

        .sidebar .logo {
            font-size: 1.5rem;
            font-weight: var(--heading-font-weight);
            margin-bottom: 2rem;
            color: var(--primary-color);
        }

        .sidebar nav ul li {
            margin-bottom: 1.5rem;
        }

        .sidebar nav ul li a {
            color: var(--secondary-color);
            font-weight: var(--body-font-weight);
            font-size: 1rem;
            transition: color var(--transition-speed);
        }

        .sidebar nav ul li a:hover,
        .sidebar nav ul li a.active {
            color: var(--primary-color);
        }

        /* Mobile Menu Button */
        .menu-btn {
            position: fixed;
            top: 1rem;
            left: 1rem;
            background: none;
            border: none;
            font-size: 1.8rem;
            color: var(--primary-color);
            cursor: pointer;
            z-index: 1100;
            display: none;
        }

        /* Header */
        .header {
            margin-left: 250px;
            width: calc(100% - 250px);
            background-color: var(--header-background);
            padding: 1rem 2rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 900;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .header .site-title {
            font-size: 1.5rem;
            font-weight: var(--heading-font-weight);
            color: var(--primary-color);
        }

        .header .search-bar {
            position: relative;
        }

        .header .search-bar input {
            padding: 0.5rem 2rem 0.5rem 0.5rem;
            border: 1px solid var(--code-border);
            border-radius: 4px;
            width: 200px;
            transition: width var(--transition-speed);
        }

        .header .search-bar input:focus {
            width: 250px;
            outline: none;
            border-color: var(--primary-color);
        }

        .header .search-bar .fa-search {
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-color);
        }

        /* Main Content */
        .main-content {
            margin-left: 250px;
            padding: 2rem;
            width: calc(100% - 250px);
            transition: margin-left var(--transition-speed), width var(--transition-speed);
        }

        /* Sections */
        section {
            margin-bottom: 4rem;
        }

        section h2 {
            font-size: 2rem;
            font-weight: var(--heading-font-weight);
            margin-bottom: 1rem;
            color: var(--primary-color);
            position: relative;
            padding-bottom: 0.5rem;
        }

        section h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: var(--primary-color);
            border-radius: 2px;
        }

        section h3 {
            font-size: 1.5rem;
            font-weight: var(--heading-font-weight);
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            color: var(--text-color);
        }

        section p {
            margin-bottom: 1rem;
            color: var(--text-color);
        }

        /* Code Blocks */
        pre {
            background-color: var(--code-background);
            border: 1px solid var(--code-border);
            padding: 1rem;
            border-radius: 4px;
            overflow-x: auto;
            font-family: 'Courier New', Courier, monospace;
            color: #333;
        }

        code {
            background-color: var(--code-background);
            padding: 0.2rem 0.4rem;
            border-radius: 4px;
            font-family: 'Courier New', Courier, monospace;
        }

        /* Footer */
        footer {
            background-color: var(--footer-background);
            color: var(--secondary-color);
            padding: 2rem;
            text-align: center;
        }

        footer a {
            color: var(--accent-color);
            text-decoration: underline;
        }

        /* Scroll to Top */
        .scroll-to-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background-color: var(--primary-color);
            color: var(--secondary-color);
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            transition: background var(--transition-speed), transform var(--transition-speed), opacity var(--transition-speed);
            opacity: 0;
            visibility: hidden;
            z-index: 1000;
        }

        .scroll-to-top.visible {
            opacity: 1;
            visibility: visible;
        }

        .scroll-to-top:hover {
            background-color: var(--accent-color);
            transform: translateY(-5px);
        }

        /* Responsive Styles */
        @media (max-width: 1024px) {
            .header {
                margin-left: 200px;
                width: calc(100% - 200px);
            }

            .sidebar {
                width: 200px;
            }

            .sidebar.hidden {
                transform: translateX(-100%);
            }
        }

        @media (max-width: 768px) {
            .sidebar {
                transform: translateX(-100%);
            }

            .sidebar.hidden {
                transform: translateX(-100%);
            }

            .sidebar.active {
                transform: translateX(0);
            }

            .header {
                margin-left: 0;
                width: 100%;
                justify-content: space-between;
            }

            .main-content {
                margin-left: 0;
                width: 100%;
            }

            .menu-btn {
                display: block;
            }

            .header .search-bar {
                display: none;
            }
        }

        @media (max-width: 480px) {
            .main-content {
                padding: 1rem;
            }

            section h2 {
                font-size: 1.75rem;
            }

            section h3 {
                font-size: 1.25rem;
            }

            pre {
                font-size: 0.9rem;
            }
        }

    </style>
</head>
<body>
    <!-- Mobile Menu Button -->
    <button class="menu-btn" id="menuBtn" aria-label="Open sidebar"><i class="fas fa-bars"></i></button>

    <!-- Sidebar Navigation -->
    <aside class="sidebar hidden" id="sidebar" aria-label="Sidebar Navigation">
        <div class="logo">AbhiModels API</div>
        <nav>
            <ul>
                <li><a href="#realtime-api-overview" class="nav-link">Realtime API Overview</a></li>
                <li><a href="#text-to-image-api" class="nav-link">Text to Image API</a></li>
                <li><a href="#image-to-image-api" class="nav-link">Image to Image API</a></li>
                <li><a href="#inpainting-api" class="nav-link">Inpainting API</a></li>
                <li><a href="#fetch-image-api" class="nav-link">Fetch Image API</a></li>
            </ul>
        </nav>
    </aside>

    <!-- Main Content -->
    <div class="main-content" id="mainContent">
        <!-- Header -->
        <header class="header">
            <div class="site-title">AbhiModels API Documentation</div>
            <div class="search-bar">
                <input type="text" placeholder="Search..." aria-label="Search documentation">
                <i class="fas fa-search"></i>
            </div>
        </header>

        <!-- Realtime API Overview -->
        <section id="realtime-api-overview">
            <h2>Realtime API Overview</h2>
            <p>The Realtime API provided by AbhiModels enables users to generate images quickly and efficiently using various endpoints. This API supports both text-based and image-based requests, allowing for flexible image generation tailored to specific needs.</p>
            
            <h3>Image Generation Capabilities</h3>
            <p>Images can be generated in seconds, with the ability to specify the number of images produced as well as their dimensions. The API currently supports the following image formats:</p>
            <ul>
                <li>PNG</li>
                <li>JPG</li>
            </ul>

            <h3>Available Endpoints</h3>
            <ol>
                <li><strong>Text to Image Endpoint</strong>
                    <p>This endpoint generates an image based on a text prompt provided in the request. Users can specify:</p>
                    <ul>
                        <li><strong>Prompt</strong>: Describes what should be included in the generated image.</li>
                        <li><strong>Negative Prompt</strong>: Lists elements that should not appear in the image, refining the description.</li>
                    </ul>
                </li>
                <li><strong>Image to Image Endpoint</strong>
                    <p>This endpoint allows users to generate an image based on an existing image URL. Along with the original image, users can provide:</p>
                    <ul>
                        <li><strong>Prompt</strong>: Describes desired modifications.</li>
                        <li><strong>Negative Prompt</strong>: Specifies what should be excluded from the generated image.</li>
                    </ul>
                    <p>The resulting image will incorporate changes based on the provided prompts.</p>
                </li>
                <li><strong>Inpainting Endpoint</strong>
                    <p>This endpoint generates an image using both an original image and a mask, both provided via URLs. Users can specify:</p>
                    <ul>
                        <li><strong>Prompt</strong>: Details modifications to apply.</li>
                        <li><strong>Negative Prompt</strong>: Indicates elements to avoid.</li>
                    </ul>
                    <p>The generated image will reflect changes made according to the mask and prompts, effectively replacing specified elements.</p>
                </li>
                <li><strong>Fetch Queued Images Endpoint</strong>
                    <p>This endpoint retrieves an already generated image by passing its ID, which is specified in the response of a previous request. If an image is still processing, users will receive its ID along with an estimated time for completion (ETA). To fetch the completed image, pass your API key as part of the request body to the endpoint indicated by the <code>fetch_result</code> parameter.</p>
                    <p>Alternatively, users can provide a webhook during the generation request for automatic notifications upon completion.</p>
                </li>
            </ol>

            <h3>Playground</h3>
            <p>Users can experiment with available endpoints in the Playground section of AbhiModels, but registration is required to access this feature.</p>

            <p>This document provides a comprehensive overview of AbhiModels' Realtime API for image generation, detailing its capabilities and available endpoints for effective use.</p>
        </section>

        <!-- Text to Image API Documentation -->
        <section id="text-to-image-api">
            <h2>Text to Image API Documentation</h2>

            <h3>Overview</h3>
            <p>The Text to Image API allows users to generate images in real time based on provided text prompts. This endpoint is part of the AbhiModels API and facilitates the creation of images tailored to specific descriptions.</p>

            <h3>Request</h3>
            <p>To utilize the API, send a POST request to the following endpoint:</p>
            <pre><code>POST https://api.abhibhai.com/api/v6/realtime/text2img</code></pre>

            <h3>Body Attributes</h3>
            <p>The request body must include the following parameters:</p>
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>key</code></td>
                        <td>Your API Key for request authorization. <a href="#">View your API Key.</a></td>
                    </tr>
                    <tr>
                        <td><code>prompt</code></td>
                        <td>A description of the desired image.</td>
                    </tr>
                    <tr>
                        <td><code>negative_prompt</code></td>
                        <td>Descriptions of elements to avoid in the image (e.g., NSFW content, poor quality).</td>
                    </tr>
                    <tr>
                        <td><code>width</code></td>
                        <td>Width of the generated image (e.g., 1024).</td>
                    </tr>
                    <tr>
                        <td><code>height</code></td>
                        <td>Height of the generated image (e.g., 1024).</td>
                    </tr>
                    <tr>
                        <td><code>samples</code></td>
                        <td>Number of images to return (maximum 4).</td>
                    </tr>
                    <tr>
                        <td><code>safety_checker</code></td>
                        <td>Ensures inappropriate content is replaced with a blank image (default: true).</td>
                    </tr>
                    <tr>
                        <td><code>seed</code></td>
                        <td>Used for reproducibility; use <code>null</code> for a random seed.</td>
                    </tr>
                    <tr>
                        <td><code>instant_response</code></td>
                        <td>Enables immediate response before processing completes (default: false).</td>
                    </tr>
                    <tr>
                        <td><code>base64</code></td>
                        <td>Returns response as a base64 string (default: false).</td>
                    </tr>
                    <tr>
                        <td><code>webhook</code></td>
                        <td>URL for receiving a POST call after image generation completes.</td>
                    </tr>
                    <tr>
                        <td><code>track_id</code></td>
                        <td>ID returned in the webhook response for tracking.</td>
                    </tr>
                    <tr>
                        <td><code>enhance_prompt</code></td>
                        <td>Enhances prompts for better results (options: true, false).</td>
                    </tr>
                    <tr>
                        <td><code>enhance_style</code></td>
                        <td>Specifies the style of the image from various available styles.</td>
                    </tr>
                </tbody>
            </table>

            <h3>Example Request Body</h3>
            <pre><code>{
  "key": "",
  "prompt": "ultra realistic close up portrait ((beautiful pale cyberpunk female with heavy black eyeliner))",
  "negative_prompt": "bad quality",
  "width": "512",
  "height": "512",
  "safety_checker": false,
  "seed": null,
  "samples": 1,
  "base64": false,
  "webhook": null,
  "track_id": null
}</code></pre>

            <h3>Example Code Snippets</h3>

            <h4>JavaScript</h4>
            <pre><code>var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
  "key": "",
  "prompt": "ultra realistic close up portrait ((beautiful pale cyberpunk female with heavy black eyeliner))",
  "negative_prompt": "bad quality",
  "width": "512",
  "height": "512",
  "safety_checker": false,
  "seed": null,
  "samples": 1,
  "base64": false,
  "webhook": null,
  "track_id": null
});

var requestOptions = {
  method: 'POST',
  headers: myHeaders,
  body: raw,
};

fetch("https://api.abhibhai.com/api/v6/realtime/text2img", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
</code></pre>

            <h4>Python</h4>
            <pre><code>import requests
import json

url = "https://api.abhibhai.com/api/v6/realtime/text2img"
payload = json.dumps({
    "key": "",
    "prompt": "ultra realistic close up portrait ((beautiful pale cyberpunk female with heavy black eyeliner))",
    "negative_prompt": "bad quality",
    "width": "512",
    "height": "512",
    "safety_checker": False,
    "seed": None,
    "samples": 1,
    "base64": False,
    "webhook": None,
    "track_id": None
})

headers = {
    'Content-Type': 'application/json'
}

response = requests.post(url, headers=headers, data=payload)
print(response.text)</code></pre>

            <h3>Response Format</h3>
            <p>A successful response includes:</p>
            <pre><code>{
  "status": "success",
  "generationTime": 1.06,
  "id": 91753437,
  "output": [
    "<image_url>"
  ],
  ...
}</code></pre>

            <p>This document provides a comprehensive overview of using the Text to Image API, including necessary parameters, example requests, and expected responses.</p>
        </section>

        <!-- Image to Image API Documentation -->
        <section id="image-to-image-api">
            <h2>Image to Image API Documentation</h2>

            <h3>Overview</h3>
            <p>The Image to Image API allows users to generate new images based on existing images. By providing an initial image URL along with descriptive prompts, users can create modified versions of the original image, enhancing creativity and customization.</p>

            <h3>Endpoint</h3>
            <pre><code>POST https://api.abhibhai.com/api/v6/realtime/img2img</code></pre>

            <h3>Request Parameters</h3>
            <p>The request body must include the following parameters:</p>
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>key</code></td>
                        <td>Your API Key used for request authorization.</td>
                    </tr>
                    <tr>
                        <td><code>prompt</code></td>
                        <td>Text prompt describing the desired modifications to the image.</td>
                    </tr>
                    <tr>
                        <td><code>negative_prompt</code></td>
                        <td>Items or features that should not be included in the generated image.</td>
                    </tr>
                    <tr>
                        <td><code>init_image</code></td>
                        <td>URL of the initial image from which to generate the new image.</td>
                    </tr>
                    <tr>
                        <td><code>width</code></td>
                        <td>Width of the generated image (maximum: 1024).</td>
                    </tr>
                    <tr>
                        <td><code>height</code></td>
                        <td>Height of the generated image (maximum: 1024).</td>
                    </tr>
                    <tr>
                        <td><code>samples</code></td>
                        <td>Number of images to return (maximum: 4).</td>
                    </tr>
                    <tr>
                        <td><code>safety_checker</code></td>
                        <td>A feature that replaces NSFW images with a blank image if detected (default: false).</td>
                    </tr>
                    <tr>
                        <td><code>base64</code></td>
                        <td>Return response as a base64 string (default: false).</td>
                    </tr>
                    <tr>
                        <td><code>strength</code></td>
                        <td>Determines how much influence the initial image has on the output; a value of 1.0 means full destruction of information in the initial image.</td>
                    </tr>
                    <tr>
                        <td><code>instant_response</code></td>
                        <td>If set to true, returns an instant response before processing is complete (default: false).</td>
                    </tr>
                    <tr>
                        <td><code>seed</code></td>
                        <td>Seed for reproducibility; using the same seed will yield the same output. Use "null" for a random seed.</td>
                    </tr>
                    <tr>
                        <td><code>enhance_prompt</code></td>
                        <td>Option to enhance prompts for better results (options: true, false).</td>
                    </tr>
                    <tr>
                        <td><code>enhance_style</code></td>
                        <td>Specifies the style of the generated image from various available styles (e.g., surrealism, watercolor).</td>
                    </tr>
                    <tr>
                        <td><code>webhook</code></td>
                        <td>Set a URL to receive a POST call once image generation is complete.</td>
                    </tr>
                    <tr>
                        <td><code>track_id</code></td>
                        <td>ID returned in the webhook response for tracking purposes.</td>
                    </tr>
                </tbody>
            </table>

            <h3>Example Request Body</h3>
            <pre><code>{
  "key": "",
  "prompt": "a cat sitting on a bench",
  "negative_prompt": "bad quality",
  "init_image": "https://raw.githubusercontent.com/CompVis/stable-diffusion/main/data/inpainting_examples/overture-creations-5sI6fQgYIuo.png",
  "width": "512",
  "height": "512",
  "samples": "1",
  "safety_checker": false,
  "strength": 0.7,
  "seed": null,
  "webhook": null,
  "track_id": null
}</code></pre>

            <h3>Example Code Snippets</h3>

            <h4>JavaScript</h4>
            <pre><code>var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
    "key": "",
    "prompt": "a cat sitting on a bench",
    "negative_prompt": "bad quality",
    "init_image": "https://raw.githubusercontent.com/CompVis/stable-diffusion/main/data/inpainting_examples/overture-creations-5sI6fQgYIuo.png",
    "width": "512",
    "height": "512",
    "samples": "1",
    "safety_checker": false,
    "strength": 0.7,
    "seed": null,
    "webhook": null,
    "track_id": null
});

var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
};

fetch("https://api.abhibhai.com/api/v6/realtime/img2img", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));</code></pre>

            <h4>Python</h4>
            <pre><code>import requests
import json

url = "https://api.abhibhai.com/api/v6/realtime/img2img"
payload = json.dumps({
    "key": "",
    "prompt": "a cat sitting on a bench",
    "negative_prompt": "bad quality",
    "init_image": "https://raw.githubusercontent.com/CompVis/stable-diffusion/main/data/inpainting_examples/overture-creations-5sI6fQgYIuo.png",
    "width": "512",
    "height": "512",
    "samples": 1,
    "safety_checker": False,
    "strength": 0.7,
    "seed": None,
    "webhook": None,
    "track_id": None
})

headers = {
    'Content-Type': 'application/json'
}

response = requests.post(url, headers=headers, data=payload)
print(response.text)</code></pre>

            <h3>Response Format</h3>
            <p>A successful response will include:</p>
            <pre><code>{
  "status": "success",
  "generationTime": 2.92,
  "id": 302455,
  "output": [
      "<image_url>"
  ],
  ...
}</code></pre>

            <p>This document provides a detailed overview of the Image to Image API, outlining its capabilities and usage for effective image generation based on existing images.</p>
        </section>

        <!-- Inpainting API Documentation -->
        <section id="inpainting-api">
            <h2>Inpainting API Documentation</h2>

            <h3>Overview</h3>
            <p>The Inpainting API allows users to generate and modify images by utilizing an initial image and a corresponding mask. By providing these elements along with descriptive prompts, users can create tailored images that reflect specific modifications or enhancements.</p>

            <h3>Endpoint</h3>
            <pre><code>POST https://api.abhibhai.com/api/v6/realtime/inpaint</code></pre>

            <h3>Request Parameters</h3>
            <p>The request body must include the following parameters:</p>
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>key</code></td>
                        <td>Your API Key used for request authorization.</td>
                    </tr>
                    <tr>
                        <td><code>prompt</code></td>
                        <td>Text prompt describing the desired modifications to the image.</td>
                    </tr>
                    <tr>
                        <td><code>negative_prompt</code></td>
                        <td>Items or features that should not be included in the generated image.</td>
                    </tr>
                    <tr>
                        <td><code>init_image</code></td>
                        <td>URL of the initial image from which to generate the new image.</td>
                    </tr>
                    <tr>
                        <td><code>mask_image</code></td>
                        <td>URL of the mask image that specifies areas to be modified in the initial image.</td>
                    </tr>
                    <tr>
                        <td><code>width</code></td>
                        <td>Width of the generated image (maximum: 1024).</td>
                    </tr>
                    <tr>
                        <td><code>height</code></td>
                        <td>Height of the generated image (maximum: 1024).</td>
                    </tr>
                    <tr>
                        <td><code>samples</code></td>
                        <td>Number of images to return in response (maximum: 4).</td>
                    </tr>
                    <tr>
                        <td><code>safety_checker</code></td>
                        <td>A feature that replaces NSFW images with a blank image if detected (default: false).</td>
                    </tr>
                    <tr>
                        <td><code>strength</code></td>
                        <td>Determines how much influence the initial image has on the output; a value of 1.0 means full destruction of information in the initial image.</td>
                    </tr>
                    <tr>
                        <td><code>instant_response</code></td>
                        <td>If set to true, returns an instant response before processing is complete (default: false).</td>
                    </tr>
                    <tr>
                        <td><code>base64</code></td>
                        <td>Return response as a base64 string (default: false).</td>
                    </tr>
                    <tr>
                        <td><code>seed</code></td>
                        <td>Seed for reproducibility; using the same seed will yield the same output. Use "null" for a random seed.</td>
                    </tr>
                    <tr>
                        <td><code>enhance_prompt</code></td>
                        <td>Option to enhance prompts for better results (options: true/false).</td>
                    </tr>
                    <tr>
                        <td><code>enhance_style</code></td>
                        <td>Specifies the style of the generated image from various available styles.</td>
                    </tr>
                    <tr>
                        <td><code>webhook</code></td>
                        <td>Set a URL to receive a POST call once image generation is complete.</td>
                    </tr>
                    <tr>
                        <td><code>track_id</code></td>
                        <td>ID returned in the webhook response for tracking purposes.</td>
                    </tr>
                </tbody>
            </table>

            <h3>Example Request Body</h3>
            <pre><code>{
  "key": "",
  "prompt": "a cat sitting on a bench",
  "negative_prompt": "bad quality",
  "init_image": "https://raw.githubusercontent.com/CompVis/stable-diffusion/main/data/inpainting_examples/overture-creations-5sI6fQgYIuo.png",
  "mask_image": "https://raw.githubusercontent.com/CompVis/stable-diffusion/main/data/inpainting_examples/overture-creations-5sI6fQgYIuo_mask.png",
  "width": "512",
  "height": "512",
  "samples": 1,
  "safety_checker": false,
  "strength": 0.7,
  "base64": false,
  "seed": null,
  "webhook": null,
  "track_id": null
}</code></pre>

            <h3>Example Code Snippets</h3>

            <h4>JavaScript</h4>
            <pre><code>var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
    "key": "",
    "prompt": "a cat sitting on a bench",
    "negative_prompt": "bad quality",
    "init_image": "https://raw.githubusercontent.com/CompVis/stable-diffusion/main/data/inpainting_examples/overture-creations-5sI6fQgYIuo.png",
    "mask_image": "https://raw.githubusercontent.com/CompVis/stable-diffusion/main/data/inpainting_examples/overture-creations-5sI6fQgYIuo_mask.png",
    "width": "512",
    "height": "512",
    "samples": 1,
    "safety_checker": false,
    "strength": 0.7,
    "seed": null,
    "webhook": null,
    "track_id": null
});

var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
};

fetch("https://api.abhibhai.com/api/v6/realtime/inpaint", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));</code></pre>

            <h4>Python</h4>
            <pre><code>import requests
import json

url = "https://api.abhibhai.com/api/v6/realtime/inpaint"
payload = json.dumps({
    "key": "",
    "prompt": "a cat sitting on a bench",
    "negative_prompt": "bad quality",
    "init_image": "https://raw.githubusercontent.com/CompVis/stable-diffusion/main/data/inpainting_examples/overture-creations-5sI6fQgYIuo.png",
    "mask_image": "https://raw.githubusercontent.com/CompVis/stable-diffusion/main/data/inpainting_examples/overture-creations-5sI6fQgYIuo_mask.png",
    "width": "512",
    "height": "512",
    "samples": 1,
    "safety_checker": False,
    "strength": 0.7,
    "base64": False,
    "seed": None,
    "webhook": None,
    "track_id": None
})

headers = {
    'Content-Type': 'application/json'
}

response = requests.post(url, headers=headers, data=payload)
print(response.text)</code></pre>

            <h3>Response Format</h3>
            <p>A successful response will include:</p>
            <pre><code>{
  "status": "success",
  "generationTime": 1.9110066890716553,
  "id": 12384052,
  "output": [
      "<image_url>"
  ],
  ...
}</code></pre>

            <p>This document provides a detailed overview of the Inpainting API, outlining its capabilities and usage for effective image generation and modification based on an initial image and mask.</p>
        </section>

        <!-- Fetch Image API Documentation -->
        <section id="fetch-image-api">
            <h2>Fetch Image API Documentation</h2>

            <h3>Overview</h3>
            <p>The Fetch Image API allows users to retrieve images that have already been generated through the AbhiModels platform. By using the unique ID assigned to each generated image, users can easily access the output without needing to regenerate it.</p>

            <h3>Endpoint</h3>
            <pre><code>POST https://api.abhibhai.com/api/v6/realtime/fetchimage</code></pre>

            <h3>Request Parameters</h3>
            <p>The request body must include the following parameter:</p>
            <table>
                <thead>
                    <tr>
                        <th>Parameter</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>key</code></td>
                        <td>Your API Key used for request authorization.</td>
                    </tr>
                    <tr>
                        <td><code>id</code></td>
                        <td>The unique ID of the generated image that you wish to retrieve.</td>
                    </tr>
                </tbody>
            </table>

            <h3>Example Request Body</h3>
            <pre><code>{
  "key": "",
  "id": "12345678"
}</code></pre>

            <h3>Example Code Snippets</h3>

            <h4>JavaScript</h4>
            <pre><code>var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
    "key": "",
    "id": "12345678"
});

var requestOptions = {
    method: 'POST',
    headers: myHeaders,
    body: raw,
};

fetch("https://api.abhibhai.com/api/v6/realtime/fetchimage", requestOptions)
.then(response => response.json())
.then(result => console.log(result))
.catch(error => console.log('error', error));</code></pre>

            <h4>Python</h4>
            <pre><code>import requests
import json

url = "https://api.abhibhai.com/api/v6/realtime/fetchimage"
payload = json.dumps({
    "key": "",
    "id": "12345678"
})

headers = {
    'Content-Type': 'application/json'
}

response = requests.post(url, headers=headers, data=payload)
print(response.text)</code></pre>

            <h3>Response Format</h3>
            <p>A successful response will include:</p>
            <pre><code>{
  "status": "success",
  "id": "12345678",
  "output": "<image_url>"
}</code></pre>

            <p>This document provides a detailed overview of the Fetch Image API, outlining its capabilities and usage for retrieving previously generated images efficiently.</p>
        </section>

        <!-- Footer -->
        <footer>
            <p>&copy; 2023 AbhiModels. All Rights Reserved.</p>
            <p>Visit our website: <a href="https://api.abhibhai.com">api.abhibhai.com</a></p>
        </footer>

        <!-- Scroll to Top Button -->
        <button class="scroll-to-top" id="scrollToTopBtn" aria-label="Scroll to top"><i class="fas fa-arrow-up"></i></button>
    </div>

    <!-- Scripts -->
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Sidebar Toggle
            const menuBtn = document.getElementById('menuBtn');
            const sidebar = document.getElementById('sidebar');

            menuBtn.addEventListener('click', function () {
                sidebar.classList.toggle('hidden');
                sidebar.classList.toggle('active');
            });

            // Active Link Highlighting
            const navLinks = document.querySelectorAll('.nav-link');
            const sections = document.querySelectorAll('section');

            window.addEventListener('scroll', function() {
                let current = '';

                sections.forEach(section => {
                    const sectionTop = section.offsetTop - 100;
                    if (pageYOffset >= sectionTop) {
                        current = section.getAttribute('id');
                    }
                });

                navLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href').includes(current)) {
                        link.classList.add('active');
                    }
                });
            });

            // Smooth Scrolling
            const links = document.querySelectorAll('a[href^="#"]');

            links.forEach(link => {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const target = document.querySelector(this.getAttribute('href'));
                    if (target) {
                        window.scrollTo({
                            top: target.offsetTop - 60,
                            behavior: 'smooth'
                        });
                        // Close sidebar on mobile after clicking
                        if (sidebar.classList.contains('active')) {
                            sidebar.classList.remove('active');
                            sidebar.classList.add('hidden');
                        }
                    }
                });
            });

            // Scroll to Top Button
            const scrollToTopBtn = document.getElementById('scrollToTopBtn');

            window.addEventListener('scroll', function() {
                if (window.pageYOffset > 300) {
                    scrollToTopBtn.classList.add('visible');
                } else {
                    scrollToTopBtn.classList.remove('visible');
                }
            });

            scrollToTopBtn.addEventListener('click', function() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });

            // Basic Search Functionality
            const searchInput = document.querySelector('.search-bar input');

            searchInput.addEventListener('input', function() {
                const query = this.value.toLowerCase();
                const sections = document.querySelectorAll('section');

                sections.forEach(section => {
                    const text = section.textContent.toLowerCase();
                    if (text.includes(query)) {
                        section.style.display = 'block';
                    } else {
                        section.style.display = 'none';
                    }
                });
            });
        });
    </script>
</body>
</html>