AutoExpress Docker version 1.0

.gitattributes

@@ -1,35 +1,2 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,156 @@
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintainted in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+#.idea/
+Output/
+uploads/
+.vscode/
+QOL CHANGES.txt

.hintrc

@@ -0,0 +1,25 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/name-role-value": [
+      "default",
+      {
+        "button-name": "off"
+      }
+    ],
+    "axe/forms": [
+      "default",
+      {
+        "label": "off"
+      }
+    ]
+  },
+  "browserslist": [
+    "defaults",
+    "not ie 11",
+    "not ios_saf <= 18",
+    "not safari <= 18"
+  ]
+}

Changelog.md

@@ -0,0 +1,26 @@
+## 2024-11-13
+- Docker image available here: [AutoExpress on DockerHub](https://hub.docker.com/r/deepratna/autoexpress)
+- Added Logo to UI
+- Added Scheduler dropdown
+- Added info icon to UI
+  - Whenever you hover on the image or the info icon, it will show the raw generation data for convienience.
+- Added Settings cog to have a modal for infrequently used settings.
+- If element does not exist in dropdown (Model, Sampler, Scheduler, Lora), a new dropdown element is created.
+
+**Avery Contributions**
+- Boiler plate Theming Support by modifying [main.css](autoexpress/static/stylesheet/main.css)
+- Implemented Gradient pause feature for performace increase.
+- Expression jsons are now in different flavours instead of only being Anime/Realistic.
+- 
+![Latest UI](autoexpress/resources/images/AutoExpressUI_2024_11_13.png)
+
+
+## 2024-09-26
+- Tested on Ububtu (22.04.3 | jammy)
+
+## 2024-06-23
+- Added revamped UI
+![AutoExpress Reskinned](autoexpress/resources/images/AutoExpressUI_Revamped.png)
+
+- Removed my custom logger and added loguru library.
+

Dockerfile

@@ -0,0 +1,25 @@
+# Use the official Python image and set it to support multiple architectures
+FROM python:3
+
+# Set working directory
+WORKDIR /AutoExpress/
+
+# Copy the requirements file and install dependencies
+COPY requirements.txt ./
+RUN pip install --upgrade pip
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the entire project into the container
+COPY . .
+
+# Expose the port that Flask will run on
+EXPOSE 5000
+
+# Set environment variable for Flask
+ENV FLASK_APP=autoexpress
+ENV FLASK_RUN_HOST=0.0.0.0
+ENV FLASK_RUN_PORT=5000
+
+# Command to run the Flask app
+CMD ["flask", "run"]
+

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Deepratna Awale
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,12 +1,160 @@
+<h1> <img src="autoexpress\static\ico\favicon-rounded.png" alt="Favicon" width="25px"> AutoExpress</h1>
+
+# Introduction
+Automatically creates 28 different expressions from a given image using [Automatic1111 Stable Diffusion WebUI API](https://github.com/AUTOMATIC1111/stable-diffusion-webui). The application uses Inpainting with [After Detailer Extension](https://github.com/Bing-su/adetailer) to inpaint the following expressions on the face:
+
+### For the latest changes, goto: [Change Log](Changelog.md)
+
+<p align="center">
+
+| Emotion       | Emotion        | Emotion     | Emotion     |
+| ------------- | -------------- | ----------- | ----------- |
+| Admiration    | Amusement      | Anger       | Annoyance   |
+| Approval      | Caring         | Confusion   | Curiosity   |
+| Desire        | Disappointment | Disapproval | Disgust     |
+| Embarrassment | Excitement     | Fear        | Gratitude   |
+| Grief         | Joy            | Love        | Nervousness |
+| Neutral       | Optimism       | Pride       | Realization |
+| Relief        | Remorse        | Sadness     | Surprise    |
+
+</p>
+
+
+# Examples
+
+### Anime
+
+<div style="text-align:center">
+    <figure>
+        <img src ="autoexpress/resources/images/anime_grid.png" alt="Anime Image Grid" width="100%">
+        <figcaption>Anime Image Emotion Grid</figcaption>
+    </figure>
+</div>
+
+
+The above is an example anime expressions on the following image without cherry picking results.
+
+<div style="text-align:center">
+    <figure>
+        <img src="autoexpress\resources\images\anime_input.png" alt="Realistic Input Image" width="100%">
+        <figcaption>Anime input image</figcaption>
+    </figure>
+</div>
+
+
+### Realistic
+
+<div style="text-align:center">
+    <figure>
+        <img src ="autoexpress/resources/images/realistic_grid.png" alt="Realistic Image Grid" width="100%">
+        <figcaption>Realistic Image Emotion Grid</figcaption>
+    </figure>
+</div>
+
+The above is an example realistic expressions on the following image without cherry picking results.
+
+<div style="text-align:center">
+    <figure>
+        <img src="autoexpress\resources\images\realistic_input.png" alt="Realistic Input Image" width="100%">
+        <figcaption>Realistic input image</figcaption>
+    </figure>
+</div>
+
 ---
-title: AutoExpress
-emoji: 👀
-colorFrom: purple
-colorTo: green
-sdk: docker
-pinned: false
-license: mit
-short_description: Launch AutoExpress to create expressions for chatbots.
----
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Requirements
+- [Python3](https://www.python.org/downloads/) Prefer version 10
+- [Automatic1111 Stable Diffusion WebUI API](https://github.com/AUTOMATIC1111/stable-diffusion-webui)
+    - [Online Services](https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Online-Services)
+    - I'm currently working on integrating my [CivitAI-Model-Downloader](https://github.com/deepratna-awale/CivitAI-Model-Downloader) to automatically download LORAs.
+- [After Detailer Extension](https://github.com/Bing-su/adetailer)
+
+- ## Additional packages for Linux
+- python3-pip
+- python3-venv
+
+
+## Run With Docker (Requires [Docker](https://www.docker.com/))
+
+> Now AutoExpress is also available as a [Docker Image](https://hub.docker.com/r/deepratna/autoexpress)
+
+Pull image from DockerHub
+```bash
+docker pull deepratna/autoexpress
+```
+Run
+```bash
+docker run -p 5000:5000 deepratna/autoexpress
+```
+### OR
+Build (skip if you have pulled image)
+```bash 
+git clone https://github.com/deepratnaawale/AutoExpress.git
+cd AutoExpress
+```
+```bash
+docker buildx build --tag ${your_dockerhub_username}/autoexpress .
+```
+Run
+```bash
+docker run -p 5000:5000 ${your_dockerhub_username}/autoexpress
+```
+
+## Clone Github Repo and cd into it
+```bash
+git clone https://github.com/deepratnaawale/AutoExpress.git
+cd AutoExpress
+```
+
+- Create and activate virtual enviorenment
+```bash
+python3 -m venv .venv
+```
+- WINDOWS
+```bash
+.venv\Scripts\activate
+```
+- LINUX
+```bash
+source .venv/bin/activate
+```
+
+- Install Requirements
+```bash
+pip install -r requirements.txt
+```
+
+- Launch App
+```bash
+flask --app autoexpress run
+```
+
+- Connect to the AutoExpress UI at
+[http://127.0.0.1:5000](http:127.0.0.1:5000)
+
+## Launch Your A1111 Stable Diffusion WebUI Api
+> You can check if the api is active by accessing the docs (if running locally)
+[http://127.0.0.1:7860/docs#/default/](http://127.0.0.1:7860/docs#/default/)
+
+
+# Usage
+![UI Description](autoexpress/resources/images/UI.png)
+
+It's pretty Straight forward. Keep an eye on the logs in the console. Dropping an image will auto populate all attributes in the UI if the image has Stable Diffusion info text. Only supports A1111 WebUI API for now. 
+
+PS: This is a very handy tool to use with [Silly Tavern](https://github.com/SillyTavern/SillyTavern) to **generate character expressions sprites** for any bot.
+
+# Latest UI
+![LatestUI](autoexpress/resources/images/AutoExpressUI_2024_11_13.png)
+
+# Future Work
+- Change pose along with expression keeping consistent clothes and background. (Probably via Controlnets and ADetailer)
+- Better Expressions for Realistic Images.
+- Tests to check each module.
+
+# Special Thanks
+[SD Parsers by d3x-at](https://github.com/d3x-at/sd-parsers)
+
+[SD API Examples](https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/3734)
+
+[Avery Velfaire](https://github.com/AveryVeilfaire) for bug fixes, UI design, and prompt engineering.

autoexpress/__init__.py

@@ -0,0 +1,13 @@
+from flask import Flask
+import sys
+import os
+
+parent_dir = os.path.abspath(os.path.join(os.path.dirname(__file__), os.pardir))
+sys.path.insert(0, parent_dir)
+
+autoexpress = Flask(__name__)
+
+from autoexpress.views import autoexpress
+
+if __name__ == "__main__":
+    autoexpress.run(debug=True)

autoexpress/create_grid.py

@@ -0,0 +1,55 @@
+import matplotlib.pyplot as plt
+import glob
+import matplotlib.image as mpimg
+from modules.json_handler import get_expression_list
+
+def plot_images(images, labels, rows, cols, output_file):
+    fig, axes = plt.subplots(rows, cols, figsize=(12, 12))
+    fig.patch.set_facecolor("#333333")  # Set background color to dark grey
+    for ax in axes.flat:
+        ax.axis("off")
+    for i, ax in enumerate(axes.flat):
+        ax.imshow(images[i])
+        ax.set_title(labels[i], color="white")  # Set title color to white
+    plt.tight_layout()
+    plt.savefig(output_file, facecolor=fig.get_facecolor())  # Save figure
+    plt.show()
+
+
+def create_sprites(images, rows, cols, output_file):
+    fig, axes = plt.subplots(rows, cols, figsize=(12, 12))
+    fig.patch.set_facecolor("#333333")  # Set background color to dark grey
+    
+    for ax in axes.flat:
+        ax.axis("off")
+    
+    for i, ax in enumerate(axes.flat):
+        ax.imshow(images[i])
+
+    plt.subplots_adjust(left=0, right=1, top=1, bottom=0, wspace=0, hspace=0)
+    plt.savefig(output_file, facecolor=fig.get_facecolor())  # Save figure
+    plt.show()
+
+
+def load_images_from_directory(directory):
+    image_list = []
+    for filename in glob.glob(directory + "/*.png"):
+        image = mpimg.imread(filename)
+        image_list.append(image)
+    return image_list
+
+
+def main():
+    character_name = "Hinata" 
+    input_dir = r"Output\Hinata"
+    output_file = f"Output\\{character_name}_sprite.png"
+    rows,cols = 4, 7
+
+    labels = get_expression_list().keys()
+    images = load_images_from_directory(input_dir)
+
+    # plot_images(images, labels, rows, cols, output_file)
+    create_sprites(images, rows, cols, output_file)
+
+if __name__ == "__main__":
+    main()

autoexpress/modules/a1111_client.py

@@ -0,0 +1,248 @@
+import requests
+import io
+import base64
+from PIL import Image, PngImagePlugin
+from loguru import logger as log
+import pathlib
+
+
+class A1111Client:
+
+    def __init__(self, ip="127.0.0.1", port="7860", use_https=False):
+        protocol = "https://" if use_https else "http://"
+        self._url = f"{protocol}{ip}:{port}"
+        self._endpoints = {
+            "img2img": "/sdapi/v1/img2img",
+            "samplers": "/sdapi/v1/samplers",
+            "models": "/sdapi/v1/sd-models",
+            "loras": "/sdapi/v1/loras",
+            "extensions": "/sdapi/v1/extensions",
+            "interrupt": "/sdapi/v1/interrupt",
+            "image_info": "/sdapi/v1/png-info",
+        }
+
+    @property
+    def extensions(self):
+        response = requests.get(
+            url=f"{self._url}{self._endpoints['extensions']}",
+            headers={"Content-Type": "application/json"},
+        )
+
+        if response.status_code == 200:
+            r = response.json()
+            extensions = {extension["name"]: extension["enabled"] for extension in r}
+            return extensions
+        else:
+            log.error(
+                f"Request failed with code: {response.status_code} {response.json()}"
+            )
+            return None
+
+    @property
+    def loras(self):
+        response = requests.get(
+            url=f"{self._url}{self._endpoints['loras']}",
+            headers={"Content-Type": "application/json"},
+        )
+
+        if response.status_code == 200:
+            r = response.json()
+            loras = [lora["name"] for lora in r]
+            return loras
+        else:
+            log.error(
+                f"Request failed with code: {response.status_code} {response.json()}"
+            )
+            return None
+
+    @property
+    def samplers(self):
+        response = requests.get(
+            url=f"{self._url}{self._endpoints['samplers']}",
+            headers={"Content-Type": "application/json"},
+        )
+
+        if response.status_code == 200:
+            r = response.json()
+            samplers = [sampler["name"] for sampler in r]
+            return samplers
+        else:
+            log.error(
+                f"Request failed with code: {response.status_code} {response.json()}"
+            )
+            return None
+
+    @property
+    def models(self):
+        response = requests.get(
+            url=f"{self._url}{self._endpoints['models']}",
+            headers={"Content-Type": "application/json"},
+        )
+
+        if response.status_code == 200:
+            r = response.json()
+            models = [model["model_name"] for model in r]
+            return models
+        else:
+            log.error(
+                f"Request failed with code: {response.status_code} {response.json()}"
+            )
+            return None
+
+    def img2img_api(self, json_payload):
+        response = requests.post(
+            url=f"{self._url}{self._endpoints['img2img']}",
+            data=json_payload,
+            headers={"Content-Type": "application/json"},
+        )
+
+        if response.status_code == 200:
+            return response
+
+        log.error(f"Request failed with code: {response.status_code} {response.json()}")
+        return False
+
+    def get_image_info(self, b64_image):
+        png_payload = "data:image/png;base64," + b64_image
+
+        response = requests.post(
+            url=f"{self._url}{self._endpoints['image_info']}",
+            json=png_payload,
+            headers={"Content-Type": "application/json"},
+        )
+
+        if response.status_code == 200:
+            return response
+
+        log.error(f"Request failed with code: {response.status_code} {response.json()}")
+        return False
+
+    def interrupt(self):
+        response = requests.post(
+            url=f"{self._url}{self._endpoints['interrupt']}",
+            headers={"Content-Type": "application/json"},
+        )
+
+        if response.status_code != 200:
+            log.error(
+                f"Request failed with code: {response.status_code} {response.json()}"
+            )
+            return False
+
+        r = response.json()
+        log.error(f"Interrupted by user.{r.text}")
+        return True
+
+    def is_extension(self, ext="adetailer"):
+        extensions = self.extensions
+        log.debug(f"Found following extensions: {extensions}")
+
+        if ext in extensions:
+            log.info(f"Found {ext} extension.")
+
+            if extensions[ext]:
+                log.info(f"{ext} extension is enabled.")
+                return True
+            else:
+                log.warning(f"Please enable the {ext} extension if you want to use it.")
+                return False
+
+        log.error(f"Could not find {ext} extension")
+        return False
+    
+    def setURL(self, url: str):
+        self._url = url
+
+    def getURL(self):
+        return self._url
+
+
+def main():
+    import utils
+    file_path = r"D:\Workspace\AI\stable-diffusion-webui\outputs\txt2img-images\2024-04-15\00018-4139222450.png"
+    file_path = pathlib.Path(file_path)
+    image_str = utils.raw_b64_img(file_path)
+
+    json_body = {
+        "prompt": "",
+        "negative_prompt": "",
+        "styles": [""],
+        "seed": -1,
+        "subseed": -1,
+        "subseed_strength": 0,
+        "seed_resize_from_h": -1,
+        "seed_resize_from_w": -1,
+        "sampler_name": "Euler",
+        "scheduler": "Automatic",
+        "batch_size": 1,
+        "n_iter": 1,
+        "steps": 50,
+        "cfg_scale": 7,
+        "width": 512,
+        "height": 768,
+        "restore_faces": False,
+        "tiling": True,
+        "do_not_save_samples": False,
+        "do_not_save_grid": False,
+        "eta": 0,
+        "denoising_strength": 0.75,
+        "s_min_uncond": 0,
+        "s_churn": 0,
+        "s_tmax": 0,
+        "s_tmin": 0,
+        "s_noise": 0,
+        "override_settings": {},
+        "override_settings_restore_afterwards": True,
+        "refiner_checkpoint": "",
+        "refiner_switch_at": 0,
+        "disable_extra_networks": False,
+        "firstpass_image": "",
+        "comments": {},
+        "init_images": [""],
+        "resize_mode": 0,
+        "image_cfg_scale": 7,
+        "mask": "string",
+        "mask_blur_x": 4,
+        "mask_blur_y": 4,
+        "mask_blur": 0,
+        "mask_round": True,
+        "inpainting_fill": 0,
+        "inpaint_full_res": True,
+        "inpaint_full_res_padding": 0,
+        "inpainting_mask_invert": 0,
+        "initial_noise_multiplier": 0,
+        "latent_mask": "string",
+        "force_task_id": "string",
+        "sampler_index": "Euler",
+        "include_init_images": False,
+        "script_name": "",
+        "script_args": [],
+        "send_images": True,
+        "save_images": False,
+        "alwayson_scripts": {},
+        "infotext": "string",
+    }
+
+    png_payload = "data:image/png;base64," + image_str
+    json_body["init_images"][0] = png_payload
+
+    sd = A1111Client()
+    response = sd.img2img_api(json_body)
+
+    if response == 200:
+        r = response.json()
+        for i in r['images']:
+            image = Image.open(io.BytesIO(base64.b64decode(i.split(",",1)[0])))
+
+            info_response  = sd.get_image_info(i)
+    
+            pnginfo = PngImagePlugin.PngInfo()
+            pnginfo.add_text("parameters", info_response.json().get("info"))
+    
+            image.save(f"Output/{file_path.stem}.png", pnginfo=pnginfo)
+    else:
+        print(response.json())
+
+
+if __name__ == "__main__":
+    main()

autoexpress/modules/background_remover.py

@@ -0,0 +1,64 @@
+from rembg import remove
+from PIL import Image, ImageFilter
+from pathlib import Path
+import io
+from glob import glob
+from loguru import logger as log
+
+global files_processed
+files_processed = None
+
+def get_files_processed():
+    return files_processed
+
+
+def remove_background_and_feather(input_path, output_path, feather_radius=4):
+    # Read the image
+    with open(input_path, "rb") as file:
+        input_image = file.read()
+
+    # Remove the background
+    output_image = remove(input_image)
+
+    # Convert the result to a PIL image
+    img_with_transparency = Image.open(io.BytesIO(output_image))
+
+    # Apply feather (Gaussian Blur) to the alpha channel
+    alpha = img_with_transparency.getchannel("A")
+    alpha_feathered = alpha.filter(ImageFilter.GaussianBlur(feather_radius))
+    img_with_transparency.putalpha(alpha_feathered)
+
+    # Save the final image
+    img_with_transparency.save(output_path, "PNG")
+
+
+def batch_process_images(input_dir, output_dir):
+    input_dir_path = Path(input_dir)
+    output_dir_path = Path(output_dir)
+    output_dir_path.mkdir(exist_ok=True)
+    global files_processed
+    # Process each image in the input directory
+    images = list(input_dir_path.glob("*.png")) + list(input_dir_path.glob("*.jpg"))
+    if images:
+        log.info("Found the following images: ", [img.stem for img in images])
+        files_processed = len(images)
+        for image_path in images:
+            output_image_path = output_dir_path / image_path.name
+            log.info(f"Processing {image_path}...")
+            remove_background_and_feather(image_path, output_image_path)
+            log.info(f"Saved to {output_image_path}")
+        return files_processed
+    else:
+        log.info("No Images in this Directory")
+        return None
+
+
+def main():
+    input_path = input("Enter the directory your images are in: ")
+    output_path = input("Output Directory: ")
+
+    batch_process_images(input_path, output_path)
+
+# Usage: Specify your input and output directories
+if __name__ == "__main__":
+    main()

autoexpress/modules/expression_generator.py

@@ -0,0 +1,100 @@
+from . import utils, json_handler
+from . import a1111_client
+from loguru import logger as log
+
+import io
+import base64
+import pathlib
+
+from PIL import Image, PngImagePlugin
+
+
+def generate_expressions(
+    sd: a1111_client.A1111Client,
+    output_path: str,
+    settings: dict,
+    image_str: str = None,
+    input_image_path: str = None,
+    is_realistic: bool = False,
+):
+
+    image_str = utils.is_image_valid(input_image_path, image_str)
+
+    output_path = pathlib.Path(output_path)
+    pathlib.Path(output_path).mkdir(parents=True, exist_ok=True)
+
+    if is_realistic:
+        log.info("Using clip prompts since realistic is set to true.")
+        expressions = json_handler.get_clip_expression_list()
+    else:
+        expressions = json_handler.get_expression_list()
+
+    log.info(f"Output Directory: {output_path.absolute()}")
+
+    for expression_name, tags in expressions.items():
+        log.info(f"Generating image for {expression_name} expression.")
+
+        default_request_body = json_handler.get_img2img_payload()
+
+        json_payload = json_handler.edit_payload_body(
+            image_str, default_request_body, settings, tags
+        )
+
+        output_image_path = pathlib.Path(output_path, expression_name + ".png")
+
+        response = sd.img2img_api(json_payload)
+
+        if not response:
+            return
+
+        r = response.json()
+        image = Image.open(io.BytesIO(base64.b64decode(r["images"][0])))
+        image.save(output_image_path)
+        log.info("Done.")
+
+    log.info(f"Generated all Expressions in {output_path.absolute()}")
+
+
+def opaque(
+    sd: a1111_client.A1111Client,
+    input_image_path: str,
+    image_str: str,
+    output_path: str,
+    settings: dict = None,
+):
+    gen_info = None
+
+    image_str = utils.is_image_valid(input_image_path, image_str)
+
+    output_path = pathlib.Path(output_path).absolute()
+    pathlib.Path(output_path).mkdir(parents=True, exist_ok=True)
+
+    default_request_body = json_handler.get_opaque_payload()
+
+    json_payload = json_handler.edit_payload_body(
+        image_str, default_request_body, settings, ""
+    )
+
+    output_image_path = pathlib.Path(output_path, "temp" + ".png")
+
+    response = sd.img2img_api(json_payload)
+
+    if not response:
+        return
+
+    r = response.json()
+
+    img_str = r["images"][0]
+    gen_info = r["info"]
+
+    image = Image.open(io.BytesIO(base64.b64decode(img_str)))
+    image.save(output_image_path)
+
+    log.info(f"Picture generated with info: {gen_info}")
+    log.info(f"Image Saved")
+
+    log.info(
+        f"Enforced an opaque background on image. Temp file at {output_image_path.absolute()}"
+    )
+
+    return (output_image_path, gen_info)

autoexpress/modules/image_parser.py

@@ -0,0 +1,76 @@
+# Read Image Data using sd_parsers
+from sd_parsers import ParserManager
+from sd_parsers.data import Generators
+from loguru import logger as log
+import re
+
+def get_lora_from_prompt(prompt):
+    # Regular expression pattern to find text and strength
+    pattern = r"<lora:(.*?):(.*?)>"
+
+    # Find all matches
+    matches = re.findall(pattern, prompt)
+
+    log.info(matches)
+    return matches
+
+
+def get_parsed_data(image_path):
+    parser_manager = ParserManager()
+    parsed_data = parser_manager.parse(image_path)
+    if not parsed_data:  # return if no metadata found in image
+        return None
+    return parsed_data
+
+
+def generate_parameters(image_path):
+    parsed_data = get_parsed_data(image_path)
+
+    # get first sampler (there may be more than one (i.e., in upscaled comfy images)
+    sampler = next(iter(parsed_data.samplers), None)
+    if sampler is None:  # return if no samplers found in image
+        return None
+
+    prompt = parsed_data.full_prompt
+    if prompt:
+        lora = get_lora_from_prompt(prompt)
+
+    width, height = "", ""
+    if parsed_data.generator == Generators.AUTOMATIC1111:
+        try:
+            # almost every SD image generator uses a different way to store image sizes
+            width, height = parsed_data.metadata["Size"].split("x")
+        except Exception:
+            pass
+
+    params = {
+        "checkpoint": sampler.model.name if sampler.model else None,
+        "sampler": sampler.name,
+        "lora": parsed_data.metadata.get("lora", None) or parsed_data.metadata.get("lora_name", None),
+        "scheduler": sampler.parameters.get("scheduler", None),
+        "clip_skip": "2",
+        "seed": sampler.parameters.get("seed", None),
+        "steps": sampler.parameters.get("steps", None),
+        "inpaint_width": width,
+        "inpaint_height": height,
+        "cfg_scale": sampler.parameters.get("cfg_scale", None),
+        "denoising_strength": "0.5",
+        "prompt": parsed_data.full_prompt,
+        "negative_prompt": parsed_data.full_negative_prompt,
+    }
+    return params
+
+def generate_uncleaned_params(image_path): 
+    return str(get_parsed_data(image_path))
+
+
+def main():
+
+    image_path = r"D:\Workspace\AutoExpress\uploads\ComfyUI_00011_.png"
+    params = generate_parameters(image_path)
+    parsed_data = get_parsed_data(image_path)
+    log.info(params)
+    print(parsed_data)
+
+if __name__ == "__main__":
+    main()

autoexpress/modules/json_handler.py

@@ -0,0 +1,95 @@
+import json
+from loguru import logger as log
+
+def get_opaque_payload():
+    with open(r"autoexpress\resources\empty_bg.json", "r") as payload_file:
+        return json.load(payload_file)
+
+def get_expression_list():
+    with open(r"autoexpress\resources\expressions.json", "r") as exp_file:
+        return json.load(exp_file)
+
+
+def get_clip_expression_list():
+    with open(r"autoexpress\resources\clip_expressions.json", "r") as exp_file:
+        return json.load(exp_file)
+
+
+def get_img2img_payload():
+    with open(r"autoexpress\resources\payload.json", "r") as payload_file:
+        return json.load(payload_file)
+
+def update_nested_key(data, key_to_update, new_value):
+    if isinstance(data, dict):
+        for key, value in data.items():
+            if key == key_to_update:
+                data[key] = new_value
+            update_nested_key(value, key_to_update, new_value)
+    elif isinstance(data, list):
+        for item in data:
+            update_nested_key(item, key_to_update, new_value)
+
+
+def find_nested_key(data, target_key):
+    """Recursively search for a key in a nested structure (dictionary or list) and return its value."""
+    if isinstance(data, dict):
+        if target_key in data:
+            return data[target_key]
+        return next(
+            (
+                result
+                for key, value in data.items()
+                if (result := find_nested_key(value, target_key)) is not None
+            ),
+            None,
+        )
+
+    elif isinstance(data, list):
+        return next(
+            (
+                result
+                for item in data
+                if isinstance(item, (dict, list))
+                and (result := find_nested_key(item, target_key)) is not None
+            ),
+            None,
+        )
+    return None
+
+
+def edit_payload_body(b64_image_str: str, payload, settings=None, expression_tags=None):
+
+    if settings:
+        for key, value in settings.items():
+            update_nested_key(payload, key, value)
+
+    prompt = find_nested_key(payload, "ad_prompt")
+
+    if prompt:
+        if prompt[-1] not in [","]:
+            update_nested_key(payload, "ad_prompt", prompt + ", ")
+
+    if expression_tags:
+        update_nested_key(
+            payload,
+            "ad_prompt",
+            find_nested_key(payload, "ad_prompt") + str(expression_tags),
+        )
+
+    payload["prompt"] = payload["alwayson_scripts"]["ADetailer"]["args"][2]["ad_prompt"]
+    payload["negative_prompt"] = payload["alwayson_scripts"]["ADetailer"]["args"][2][
+        "ad_negative_prompt"
+    ]
+
+    log.debug(f"{payload}")
+
+    payload["init_images"][0] = b64_image_str
+
+    json_payload = json.dumps(payload, indent=4)
+
+    return json_payload
+
+
+if __name__ == "__main__":
+    expression = get_expression_list()
+    print(expression.keys())

autoexpress/modules/utils.py

@@ -0,0 +1,41 @@
+import io
+import base64
+from PIL import Image, PngImagePlugin
+from loguru import logger as log
+import pathlib
+
+
+
+def raw_b64_img(input_image):
+    # Convert the input image to base64 format (SD api accepts base64)
+    with Image.open(input_image) as image:
+        with io.BytesIO() as img_buffer:
+            # Save the image to a bytes buffer
+            image.save(
+                img_buffer, format=input_image.suffix[1:]
+            )  # suffix returns .png -> remove . to get only png
+
+            # Encode the image to base64 and decode to a string in one step
+            input_img_base64_str = base64.b64encode(img_buffer.getvalue()).decode(
+                "utf-8"
+            )
+    # input_img_base64_str = Image.open(io.BytesIO(base64.b64decode(input_image.split(",", 1)[0])))
+    return input_img_base64_str
+
+
+def b64_img(image) -> str:
+    return "data:image/png;base64," + raw_b64_img(image)
+
+
+def is_image_valid(input_image_path, image_str):
+
+    if not input_image_path and not image_str:
+        log.error("Need atleast an image path/ base 64 string of image.")
+        return False
+
+    if not image_str:
+        input_image_path = pathlib.Path(input_image_path)
+        image_str = raw_b64_img(input_image_path)
+        return image_str
+
+    return image_str

autoexpress/resources/clip_expressions.json

@@ -0,0 +1,30 @@
+{
+    "admiration": "A look of respect and warm approval, characterized by slightly widened eyes that convey interest and esteem. The eyebrows are gently arched, enhancing the expression of intrigue and appreciation. The mouth is closed in a soft, tender smile, reflecting a deep sense of admiration and pleasure. The face overall holds a calm and composed demeanor, with a slight nod or tilt of the head towards the object of admiration, symbolizing respect and veneration.",
+    "amusement": "A joyful and slightly mischievous expression, featuring slightly raised eyebrows to indicate curiosity and interest. The eyes are bright and twinkling, reflecting a light-hearted enjoyment. The mouth is open in a subtle, relaxed smile, showing a hint of teeth. The overall demeanor is relaxed and cheerful, with a gentle, playful tilt of the head, suggesting a moment of genuine amusement and delight.",
+    "anger": "A fierce and intense expression, marked by furrowed brows that draw together sharply, creating deep lines on the forehead. The eyes are narrowed and piercing, conveying a strong sense of irritation or hostility. The lips are tightly pressed together or slightly parted in a snarl, revealing clenched teeth. The jaw is set firmly, and the overall facial muscles are tensed, reflecting the strong, forceful emotions associated with anger.",
+    "annoyance": "A mildly irritated expression characterized by a slight frown and a furrowed brow, showing subtle frustration. The eyes are slightly squinted or rolling, often looking away from the source of annoyance. The lips are pursed or slightly turned down at the corners, indicating displeasure. The overall demeanor may include a subtle shaking of the head or a dismissive gesture, such as a slight shrug, conveying a sense of impatience or minor irritation.",
+    "approval": "A warm and positive expression, highlighted by softly raised eyebrows and relaxed, open eyes that convey a sense of satisfaction and agreement. The mouth is gently curved into a subtle, reassuring smile, indicating a favorable response. The overall facial posture is open and inviting, with a slight nod or an affirmative tilt of the head, symbolizing acceptance and encouragement.",
+    "caring": "A tender and compassionate expression, characterized by slightly tilted head conveying empathy and concern. The eyes are soft and warm, with gentle, direct gaze that communicates understanding and kindness. The eyebrows are relaxed and slightly curved, enhancing the nurturing aspect of the expression. The mouth is curved in a soft, comforting smile, suggesting reassurance and support. The overall demeanor is calm and attentive, projecting a strong sense of care and protection.",
+    "confusion": "A puzzled and uncertain expression, characterized by a slightly furrowed brow and a tilted head, indicating a lack of understanding. The eyes are wide and searching, possibly darting around as if looking for clarity. The mouth is partly open, reflecting hesitation or questioning, and the lips might be slightly pursed. The overall demeanor suggests bewilderment, with possible gestures like a hand to the chin or cheek, symbolizing deep thought or perplexity.",
+    "curiosity": "An intrigued and attentive expression, marked by slightly raised eyebrows and wide, bright eyes that convey a keen interest. The head may be tilted forward slightly, symbolizing an eagerness to learn or discover more. The mouth is often closed with a hint of a smile, suggesting a pleasant and engaged demeanor. Occasionally, the lips may be parted as if about to ask a question. The overall posture is alert and forward-leaning, indicating active engagement and curiosity.",
+    "desire": "An intense and longing expression, characterized by slightly parted lips and a soft, focused gaze that conveys deep yearning. The eyebrows are relaxed, but the eyes are wide and expressive, reflecting a strong emotional pull towards the object of desire. The overall facial posture is subtly forward-leaning, suggesting anticipation and attraction. The mouth may show a tender smile or remain slightly open, enhancing the sensuality and emotional depth of the expression.",
+    "disappointment": "A downcast and subdued expression, characterized by a slight frown and downturned corners of the mouth, conveying a sense of sadness or letdown. The eyebrows are gently furrowed, adding to the overall sorrowful appearance. The eyes may appear slightly glossy or stare blankly, reflecting a sense of loss or unmet expectations. The overall demeanor is slumped, with a drooping posture that enhances the impression of being disheartened.",
+    "disapproval": "A stern and critical expression, characterized by narrowed eyes and a tight, thin-lipped frown. The eyebrows are drawn down and together, creating a strong look of judgment or censure. The mouth is often set in a firm line, and the overall facial tension suggests displeasure and objection. The head may be slightly shaken or tilted back, enhancing the sense of rejection or condemnation.",
+    "disgust": "A repelled and distasteful expression, characterized by a scrunched nose and raised upper lip, mimicking a grimace. The eyebrows are knitted together, and the eyes may be slightly squinted or turned away from the source of disgust. The mouth is often open in an expression of revulsion, possibly showing the teeth in a sneer. The overall demeanor conveys a strong sense of aversion and rejection, as if recoiling from an unpleasant smell or sight.",
+    "embarrassment": "A shy and awkward expression, characterized by flushed cheeks and averted eyes that shy away from direct contact. The eyebrows are slightly raised, and the mouth may be parted or twisted into a sheepish, uncomfortable smile. The overall facial posture often includes a downward tilt of the head, symbolizing a desire to avoid attention. There might also be a nervous gesture, such as touching the face or tugging at clothing, enhancing the sense of self-consciousness and unease.",
+    "excitement": "A vibrant and energetic expression, characterized by wide-open eyes and a broad, enthusiastic smile, showing teeth. The eyebrows are raised high, enhancing the openness and alertness of the eyes. The face may be slightly flushed with the rush of adrenaline, and the overall posture is often forward-leaning or dynamic, reflecting an eagerness and joy. There might also be visible signs of animation, such as hands raised in excitement or a bounce in posture, indicating a lively and spirited mood.",
+    "fear": "A tense and alarmed expression, characterized by wide-open eyes and dilated pupils, conveying a heightened state of alertness. The eyebrows are drawn upwards, accentuating the look of shock or fright. The mouth is open, often in a slight oval shape, as if gasping or breathing heavily. The overall facial muscles are tight, and the skin may appear paler than usual due to a rush of adrenaline. The posture might be recoiling or shrinking away, signifying an instinctive response to perceived danger.",
+    "gratitude": "A warm and heartfelt expression, featuring gently smiling eyes that convey a deep sense of thankfulness. The eyebrows are relaxed, and the eyes may be slightly moist, reflecting emotional depth. The mouth is curved into a sincere, soft smile, showing appreciation and contentment. The overall demeanor is open and humble, often accompanied by a slight nod or a gesture of the hands placed over the heart, symbolizing genuine gratitude and recognition.",
+    "grief": "A wounded and defeated expression, characterized by furrowed brows and drooping eyelids that convey a sense of sorrow. The eyes are or teary, reflecting grief. The mouth is downturned, open as if in pain, expressing pain and dejection. The overall facial features appear tensed and frozen in a rictus, that conveys pain and sorrow.",
+    "joy": "An exuberant and radiant expression, characterized by wide, sparkling eyes and a wide, beaming smile that shows teeth. The eyebrows are raised, enhancing the bright and lively appearance of the eyes. The cheeks are lifted and possibly flushed with a rosy color, adding to the vibrancy of the face. The overall demeanor is very animated, with possible laughter or cheerful gestures that convey a sense of uncontained happiness and delight.",
+    "love": "A tender and affectionate expression, characterized by soft, gentle eyes that convey deep warmth and caring. The eyebrows are relaxed, curving gently to reflect a sense of calm and contentment. The mouth is slightly upturned in a serene smile, exuding kindness and a deep connection. The overall demeanor is open and inviting, often accompanied by a slight tilt of the head or a soft gaze that lingers, symbolizing intimacy and emotional closeness.",
+    "nervousness": "A tense and apprehensive expression, characterized by slightly widened eyes and a furrowed brow, reflecting anxiety or worry. The mouth may be pressed into a thin line or slightly open, indicating unease. The lips might twitch or quiver slightly as part of an involuntary nervous reaction. The overall demeanor includes fidgety movements, such as wringing hands or shifting weight from foot to foot, portraying a state of restlessness and discomfort.",
+    "neutral": "A calm and composed expression, characterized by a relaxed brow and soft, even eyes that convey a sense of tranquility and impartiality. The mouth is closed in a straight line, showing neither a smile nor a frown, maintaining an even and reserved appearance. The overall facial muscles are relaxed, suggesting a state of neutrality and detachment. The posture is typically upright and poised, reflecting a balanced and impartial emotional state.",
+    "optimism": "A hopeful and positive expression, characterized by bright eyes and a wide, confident smile. The eyebrows are raised slightly, enhancing the open and inviting look of the eyes, which convey anticipation and a forward-looking attitude. The mouth is curved upward, showing a genuine and enthusiastic smile that radiates a sense of certainty and good expectations. The overall demeanor is upbeat and energetic, often accompanied by an upright and forward-leaning posture, symbolizing readiness and eagerness for the future.",
+    "pride": "A dignified and self-assured expression, characterized by a lifted chin and a slight smile that conveys confidence and satisfaction. The eyes are focused and bright, reflecting a sense of accomplishment and self-respect. The eyebrows are relaxed but held in a natural, composed position, enhancing the overall poised appearance. The mouth is often closed in a contented, subtle smile, or slightly parted in a proud, gratified expression. The posture is erect and composed, embodying a sense of stature and presence.",
+    "realization": "An insightful and sudden expression, marked by widened eyes and slightly raised eyebrows, indicating a moment of understanding or epiphany. The eyes are focused and perhaps reflecting a shift in thought, showcasing an 'aha' moment. The mouth is relaxed, possibly parting slightly in surprise or forming a subtle smile as the realization sinks in. The overall demeanor conveys a sense of clarity and comprehension, often accompanied by a nod or a slight tilt of the head, symbolizing acknowledgment and acceptance of the new insight.",
+    "relief": "A relaxed and comforted expression, characterized by a visible release of tension in the face. The eyebrows are lifted slightly, easing any previous furrows, and the eyes are soft, perhaps closing momentarily in a sigh of relief. The mouth curves into a gentle, relieved smile, indicating a significant alleviation of stress or worry. The overall posture may include a slight sagging of the shoulders, as if a burden has been lifted, conveying a profound sense of ease and reassurance.",
+    "remorse": "A sorrowful and repentant expression, characterized by downcast eyes and a furrowed brow, reflecting deep regret. The eyes are often moist, showing a hint of tears or a saddened gaze that avoids direct contact. The mouth is turned downward in a frown, and the lips may be slightly quivering as if struggling to maintain composure. The overall demeanor is subdued, with a lowered head and possibly clasped hands, symbolizing a desire for atonement and the weight of guilt.",
+    "sadness": "A somber and melancholic expression, characterized by downward eyebrows and drooping eyelids that convey a sense of sorrow. The eyes may appear glossy or teary, reflecting emotional pain or grief. The mouth is downturned, often in a slight frown, expressing unhappiness and dejection. The overall facial features appear softened and less animated, with a general downward pull that enhances the impression of being weighed down by sadness.",
+    "surprise": "An astonished and wide-eyed expression, characterized by eyebrows raised high, enlarging the eyes in a look of shock or unexpected wonder. The mouth is often open in a rounded shape, reflecting the suddenness of the surprise. The eyes are focused, possibly with dilated pupils, signifying intense attention to the surprising event. The overall demeanor is one of momentary pause and heightened alertness, as if the person is momentarily frozen in response to an unexpected occurrence."
+}

autoexpress/resources/empty_bg.json

@@ -0,0 +1,49 @@
+{
+    "batch_size": 1,
+    "cfg_scale": 7,
+    "comments": {},
+    "denoising_strength": 0,
+    "disable_extra_networks": false,
+    "do_not_save_grid": false,
+    "do_not_save_samples": false,
+    "height": 768,
+    "image_cfg_scale": 1.5,
+    "init_images": [
+        "base64image placeholder"
+    ],
+    "initial_noise_multiplier": 1.0,
+    "inpaint_full_res": 0,
+    "inpaint_full_res_padding": 32,
+    "inpainting_fill": 1,
+    "inpainting_mask_invert": 0,
+    "mask_blur": 4,
+    "mask_blur_x": 4,
+    "mask_blur_y": 4,
+    "mask_round": true,
+    "n_iter": 1,
+    "negative_prompt": "",
+    "override_settings": {},
+    "override_settings_restore_afterwards": true,
+    "prompt": "",
+    "resize_mode": 0,
+    "restore_faces": false,
+    "s_churn": 0.0,
+    "s_min_uncond": 0.0,
+    "s_noise": 1.0,
+    "s_tmax": null,
+    "s_tmin": 0.0,
+    "sampler_name": "Euler a",
+    "scheduler": "Automatic",
+    "script_args": [],
+    "script_name": null,
+    "seed": -1,
+    "seed_enable_extras": true,
+    "seed_resize_from_h": -1,
+    "seed_resize_from_w": -1,
+    "steps": 20,
+    "styles": [],
+    "subseed": -1,
+    "subseed_strength": 0,
+    "tiling": false,
+    "width": 512
+}

autoexpress/resources/expressions.json

@@ -0,0 +1,30 @@
+{
+    "admiration": "raised eyebrow, upwards_gaze, blushing, smiling, sparkling eyes, relaxed posture",
+    "amusement": "smiling, relaxed eyes, slight blush, amused, happy",
+    "anger": "frowning, narrowed eyes, clenched teeth, angry, scowling",
+    "annoyance": "frowning, furrowed eyebrows, pouting, slight blush, irritated",
+    "approval": "smiling, nodding, content, relaxed eyes, pleased",
+    "caring": "soft smile, gentle eyes, tender, warm, caring gaze",
+    "confusion": "furrowed eyebrows, puzzled, open mouth, tilted head, confused",
+    "curiosity": "tilted head, wide eyes, intrigued, raised eyebrow, curious smile",
+    "desire": "half-lidded eyes, blushing, biting lip, longing gaze, seductive, horny",
+    "disappointment": "sad, downcast eyes, frowning, disappointed",
+    "disapproval": "stern, disapproving gaze, narrowed eyes",
+    "disgust": "scrunched nose, disgusted, averted eyes, grimacing",
+    "embarrassment": "blushing, averted eyes, embarrassed smile, flustered",
+    "excitement": "wide eyes, open mouth, smiling, energetic, excited",
+    "fear": "wide eyes, open mouth, sweating, trembling, fearful",
+    "gratitude": "smiling, bowing, thankful, touched, gentle eyes",
+    "grief": "tearful, downcast eyes, sobbing, distressed, grieving",
+    "joy": "beaming smile, sparkling eyes, joyful, laughing, delighted",
+    "love": "blushing, soft smile, loving gaze, heart eyes, affectionate",
+    "nervousness": "fidgeting, nervous smile, mouth slightly open, sweating, narrow eyes",
+    "neutral": "blank expression, calm, emotionless, neutral eyes, slight smile",
+    "optimism": "smiling, hopeful eyes, cheerful, confident, bright expression, puppy eyes",
+    "pride": "grinning, head held high, looking down, confident, proud stance",
+    "realization": "wide eyes, open mouth, surprised, enlightened, sudden clarity",
+    "relief": "relaxed smile, sighing, relieved, calm eyes, content",
+    "remorse": "downcast eyes, frowning, sad, regretful, tearful",
+    "sadness": "tearful, frowning, downcast eyes, sad, subdued smile",
+    "surprise": "@_@,surprised, wide-eyed, amazed"
+}

autoexpress/resources/illu_expressions.json

@@ -0,0 +1,30 @@
+{
+    "admiration": "A look of respect and warm approval, characterized by slightly widened eyes that convey interest and esteem. The eyebrows are gently arched, enhancing the expression of intrigue and appreciation. The mouth is closed in a soft, tender smile, reflecting a deep sense of admiration and pleasure. The face overall holds a calm and composed demeanor, with a slight nod or tilt of the head towards the object of admiration, symbolizing respect and veneration.",
+    "amusement": "A joyful and slightly mischievous expression, featuring slightly raised eyebrows to indicate curiosity and interest. The eyes are bright and twinkling, reflecting a light-hearted enjoyment. The mouth is open in a subtle, relaxed smile, showing a hint of teeth. The overall demeanor is relaxed and cheerful, with a gentle, playful tilt of the head, suggesting a moment of genuine amusement and delight.",
+    "anger": "A fierce and intense expression, furrowed brows that are brought together to conveyed a sense of frustration or anger. The eyes are narrowed and piercing, conveying a strong sense of irritation or hostility. Lips scowling or slightly parted in a snarl revealing clenched teeth. The jaw is set firmly, and the overall look is tense, reflecting the strong, forceful emotions associated with anger.",
+    "annoyance": "A mildly irritated expression characterized by a slight frown and a furrowed brow, showing subtle frustration. The eyes are slightly squinted or rolling, often looking away from the source of annoyance. The lips are pursed or slightly turned down at the corners, indicating displeasure. The overall demeanor may include a subtle shaking of the head or a dismissive gesture, such as a slight shrug, conveying a sense of impatience or minor irritation.",
+    "approval": "A warm and positive expression, highlighted by softly raised eyebrows and relaxed, open eyes that convey a sense of satisfaction and agreement. The mouth is gently curved into a subtle, reassuring smile, indicating a favorable response. The overall facial posture is open and inviting, with a slight nod or an affirmative tilt of the head, symbolizing acceptance and encouragement.",
+    "caring": "A tender and compassionate expression, characterized by slightly tilted head conveying empathy and concern. The eyes are soft and warm, with gentle, direct gaze that communicates understanding and kindness. The eyebrows are relaxed and slightly curved, enhancing the nurturing aspect of the expression. The mouth is curved in a soft, comforting smile, suggesting reassurance and support. The overall demeanor is calm and attentive, projecting a strong sense of care and protection.",
+    "confusion": "A puzzled and uncertain expression, characterized by a slightly furrowed brow and a tilted head, indicating a lack of understanding. The eyes are wide and searching, possibly darting around as if looking for clarity. The mouth is partly open, reflecting hesitation or questioning, and the lips might be slightly pursed. The overall demeanor suggests bewilderment, with possible gestures like a hand to the chin or cheek, symbolizing deep thought or perplexity.",
+    "curiosity": "An intrigued and attentive expression, marked by a single raised eyebrows and wide, bright eyes that convey a keen interest. The head may be tilted forward slightly, symbolizing an eagerness to learn or discover more. The mouth is often closed with a hint of a smile, suggesting a pleasant and engaged demeanor. Occasionally, the lips may be parted as if about to ask a question. The overall posture is alert and forward-leaning, indicating active engagement and curiosity.",
+    "desire": "An intense and longing expression, characterized by slightly parted lips flushed cheeks and a soft, focused gaze that conveys deep yearning. The eyebrows are relaxed, but the eyes are wide and expressive, reflecting a strong emotional pull towards the object of desire. The overall facial posture is subtly forward-leaning, suggesting anticipation and attraction. The mouth may show a tender smile or remain slightly open, enhancing the sensuality and emotional depth of the expression.",
+    "disappointment": "A downcast and subdued expression, characterized by a slight frown and downturned corners of the mouth, conveying a sense of sadness or letdown. The eyebrows are gently furrowed, adding to the overall sorrowful appearance. The eyes may appear slightly glossy or stare blankly, reflecting a sense of loss or unmet expectations. The overall demeanor is slumped, with a drooping posture that enhances the impression of being disheartened.",
+    "disapproval": "A stern and critical expression, characterized by narrowed eyes and a tight, thin-lipped frown. The eyebrows are drawn down and together, creating a strong look of judgment or censure. The mouth is often set in a firm line, and the overall facial tension suggests displeasure and objection. The head may be slightly shaken or tilted back, enhancing the sense of rejection or condemnation.",
+    "disgust": "A repelled and distasteful expression, characterized by a scrunched nose and raised upper lip, mimicking a grimace. The eyebrows are knitted together, and the eyes may be slightly squinted or turned away from the source of disgust. The mouth is often open in an expression of revulsion, possibly showing the teeth in a sneer. The overall demeanor conveys a strong sense of aversion and rejection, as if recoiling from an unpleasant smell or sight.",
+    "embarrassment": "A shy and awkward expression, characterized by flushed cheeks and averted eyes that shy away from direct contact. The eyebrows are slightly raised, and the mouth may be parted or twisted into a sheepish, uncomfortable smile. The overall facial posture often includes a downward tilt of the head, symbolizing a desire to avoid attention. There might also be a nervous gesture, such as touching the face or tugging at clothing, enhancing the sense of self-consciousness and unease.",
+    "excitement": "A vibrant and energetic expression, characterized by wide-open eyes and a broad, enthusiastic smile, showing teeth. The eyebrows are raised high, enhancing the openness and alertness of the eyes. The face may be slightly flushed with the rush of adrenaline, and the overall posture is often forward-leaning or dynamic, reflecting an eagerness and joy. There might also be visible signs of animation, such as hands raised in excitement or a bounce in posture, indicating a lively and spirited mood.",
+    "fear": "A tense and alarmed expression, characterized by wide-open eyes and dilated pupils, conveying a heightened state of alertness. The eyebrows are drawn upwards, accentuating the look of fright. The mouth is open, often in a slight oval shape, as if gasping. The overall facial muscles are tight, and the skin may appear paler than usual due to a rush of adrenaline. The posture might be recoiling or shrinking away, signifying an instinctive response to perceived danger.",
+    "gratitude": "A heartfelt expression, featuring gently smiling eyes that convey a deep sense of thankfulness. The eyebrows are relaxed, and the eyes may be slightly moist, reflecting emotional depth. The mouth is curved into a sincere, soft smile, showing appreciation and contentment. The overall demeanor is open and humble, often accompanied by a slight nod or a gesture of the hands placed over the heart, symbolizing genuine gratitude and recognition.",
+    "grief": "A emotionally pained and hurt expression, a downward-turned open mouth forming a wail of suffering, grit teeth, raised eyebrows, tears streaming doen cheeks, thousand yard stare, and a clenched jaw.",
+    "joy": "An exuberant and radiant expression, characterized by wide, sparkling eyes and a wide, beaming smile that shows teeth. The eyebrows are raised, enhancing the bright and lively appearance of the eyes. The cheeks are lifted and possibly flushed with a rosy color, adding to the vibrancy of the face. The overall demeanor is very animated, with possible laughter or cheerful gestures that convey a sense of uncontained happiness and delight.",
+    "love": "A tender and affectionate expression, characterized by soft, gentle eyes that convey deep warmth and caring. The eyebrows are relaxed, curving gently to reflect a sense of calm and contentment. The mouth is slightly upturned in a serene smile, exuding kindness and a deep connection. The overall demeanor is open and inviting, often accompanied by a slight tilt of the head or a soft gaze that lingers, symbolizing intimacy and emotional closeness.",
+    "nervousness": "A tense and apprehensive expression, characterized by slightly widened eyes and a furrowed brow, reflecting anxiety or worry. The mouth may be pressed into a thin line or slightly open, indicating unease. The lips might twitch or quiver slightly as part of an involuntary nervous reaction. The overall demeanor includes fidgety movements, such as wringing hands or shifting weight from foot to foot, portraying a state of restlessness and discomfort.",
+    "neutral": "A calm and composed expression, characterized by a relaxed brow and soft, even eyes that convey a sense of tranquility and impartiality. The mouth is closed in a straight line, showing neither a smile nor a frown, maintaining an even and reserved appearance. The overall facial muscles are relaxed, suggesting a state of neutrality and detachment. The posture is typically upright and poised, reflecting a balanced and impartial emotional state.",
+    "optimism": "A hopeful and positive expression, characterized by bright eyes and a wide, confident smile. The eyebrows are raised slightly, enhancing the open and inviting look of the eyes, which convey anticipation and a forward-looking attitude. The mouth is curved upward, showing a genuine and enthusiastic smile that radiates a sense of certainty and good expectations. The overall demeanor is upbeat and energetic, often accompanied by an upright and forward-leaning posture, symbolizing readiness and eagerness for the future.",
+    "pride": "A dignified and self-assured expression, characterized by a lifted chin and a big smile that conveys confidence and satisfaction. The eyes are focused and bright, reflecting a sense of accomplishment and self-respect. The eyebrows are relaxed but held in a natural, composed position, enhancing the overall poised appearance. The mouth is often closed in a contented, subtle smile, or slightly parted in a proud, gratified expression. The posture is erect and composed, embodying a sense of stature and presence.",
+    "realization": "An insightful and sudden expression, marked by widened eyes and slightly raised eyebrows, indicating a moment of understanding or epiphany. The eyes are focused and perhaps reflecting a shift in thought, showcasing an 'aha' moment. The mouth is relaxed, possibly parting slightly in surprise or forming a subtle smile as the realization sinks in. The overall demeanor conveys a sense of clarity and comprehension, often accompanied by a nod or a slight tilt of the head, symbolizing acknowledgment and acceptance of the new insight.",
+    "relief": "A relaxed and comforted expression, characterized by a visible release of tension in the face. The eyebrows are lifted slightly, easing any previous furrows, and the eyes are soft, perhaps closing momentarily in a sigh of relief. The mouth curves into a gentle, relieved smile, indicating a significant alleviation of stress or worry. The overall posture may include a slight sagging of the shoulders, as if a burden has been lifted, conveying a profound sense of ease and reassurance.",
+    "remorse": "A sorrowful and repentant expression, characterized by downcast eyes and a furrowed brow, reflecting deep regret. The eyes are often moist, showing a hint of tears or a saddened gaze that avoids direct contact. The mouth is turned downward in a frown, and the lips may be slightly quivering as if struggling to maintain composure. The overall demeanor is subdued, with a lowered head and possibly clasped hands, symbolizing a desire for atonement and the weight of guilt.",
+    "sadness": "A somber and melancholic expression, characterized by downward eyebrows and drooping eyelids that convey a sense of sorrow. The eyes may appear glossy or teary, reflecting emotional pain or grief. The mouth is downturned, often in a slight frown, expressing unhappiness and dejection. The overall facial features appear softened and less animated, with a general downward pull that enhances the impression of being weighed down by sadness.",
+    "surprise": "An astonished and wide-eyed expression, characterized by eyebrows raised high, enlarging the eyes in a look of shock or unexpected wonder. The mouth is open wide in a rounded shape, reflecting the suddenness of the surprise. The eyes are focused, possibly with dilated pupils, signifying intense attention to the surprising event. The overall demeanor is one of momentary pause and heightened alertness, as if the person is momentarily frozen in response to an unexpected occurrence."
+}

autoexpress/resources/payload.json

@@ -0,0 +1,99 @@
+{
+    "alwayson_scripts": {
+        "ADetailer": {
+            "args": [
+                true,
+                true,
+                {
+                    "ad_cfg_scale": 7,
+                    "ad_checkpoint": "Use same checkpoint",
+                    "ad_clip_skip": 1,
+                    "ad_confidence": 0.3,
+                    "ad_controlnet_guidance_end": 1,
+                    "ad_controlnet_guidance_start": 0,
+                    "ad_controlnet_model": "None",
+                    "ad_controlnet_module": "None",
+                    "ad_controlnet_weight": 1,
+                    "ad_denoising_strength": 0.5,
+                    "ad_dilate_erode": 4,
+                    "ad_inpaint_height": 512,
+                    "ad_inpaint_only_masked": true,
+                    "ad_inpaint_only_masked_padding": 32,
+                    "ad_inpaint_width": 512,
+                    "ad_mask_blur": 4,
+                    "ad_mask_k_largest": 0,
+                    "ad_mask_max_ratio": 1,
+                    "ad_mask_merge_invert": "None",
+                    "ad_mask_min_ratio": 0,
+                    "ad_model": "face_yolov8n.pt",
+                    "ad_model_classes": "",
+                    "ad_negative_prompt": "",
+                    "ad_noise_multiplier": 1,
+                    "ad_prompt": "",
+                    "ad_restore_face": false,
+                    "ad_sampler": "Euler a",
+                    "ad_scheduler": "Automatic",
+                    "ad_steps": 32,
+                    "ad_use_cfg_scale": true,
+                    "ad_use_checkpoint": true,
+                    "ad_use_clip_skip": true,
+                    "ad_use_inpaint_width_height": true,
+                    "ad_use_noise_multiplier": false,
+                    "ad_use_sampler": true,
+                    "ad_use_steps": true,
+                    "ad_use_vae": true,
+                    "ad_vae": "Use same VAE",
+                    "ad_x_offset": 0,
+                    "ad_y_offset": 0,
+                    "is_api": []
+                }
+            ]
+        }
+    },
+    "batch_size": 1,
+    "cfg_scale": 7,
+    "comments": {},
+    "denoising_strength": 0.5,
+    "disable_extra_networks": false,
+    "do_not_save_grid": false,
+    "do_not_save_samples": false,
+    "height": 128,
+    "init_images": [
+        "base64image placeholder"
+    ],
+    "initial_noise_multiplier": 1.0,
+    "inpaint_full_res": 0,
+    "inpaint_full_res_padding": 32,
+    "inpainting_fill": 1,
+    "inpainting_mask_invert": 0,
+    "mask_blur": 4,
+    "mask_blur_x": 4,
+    "mask_blur_y": 4,
+    "mask_round": true,
+    "n_iter": 1,
+    "negative_prompt": "",
+    "override_settings": {},
+    "override_settings_restore_afterwards": true,
+    "prompt": "",
+    "resize_mode": 0,
+    "restore_faces": false,
+    "s_churn": 0.0,
+    "s_min_uncond": 0.0,
+    "s_noise": 1.0,
+    "s_tmax": null,
+    "s_tmin": 0.0,
+    "sampler_name": "Euler",
+    "scheduler": "Automatic",
+    "script_args": [],
+    "script_name": null,
+    "seed": -1,
+    "seed_enable_extras": true,
+    "seed_resize_from_h": -1,
+    "seed_resize_from_w": -1,
+    "steps": 32,
+    "styles": [],
+    "subseed": -1,
+    "subseed_strength": 0,
+    "tiling": false,
+    "width": 128
+}

autoexpress/static/js/anime_toggle.js

@@ -0,0 +1,37 @@
+const styleSelector = document.getElementById("styleSelector");
+
+// Event listener for button state change
+styleSelector.addEventListener("change", () => {
+  if (styleSelector.checked) {
+    // Button is toggled ON (Realistic)
+    sendDataToServer(true);
+  } else {
+    // Button is toggled OFF (Anime)
+    sendDataToServer(false);
+  }
+});
+
+// Function to send data to your Flask server
+function sendDataToServer(isRealistic) {
+  // Make an HTTP request (e.g., using fetch or XMLHttpRequest)
+  // Replace the URL with your Flask server endpoint
+  const url = "/toggle"; // Example endpoint
+
+  fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ isRealistic }), // Send data to server
+  })
+    .then((response) => {
+      if (response.ok) {
+        console.log("Data sent successfully!");
+      } else {
+        console.error("Error sending data to server.");
+      }
+    })
+    .catch((error) => {
+      console.error("Network error:", error);
+    });
+}

autoexpress/static/js/connect.js

@@ -0,0 +1,93 @@
+let image_data = null;
+
+document.querySelector('.sd-connect').addEventListener('click', function () {
+    ;
+    var inputText = document.querySelector('#ip-input').value;  // Get the input value
+    var button = this;
+
+    // Create an XMLHttpRequest to send data
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", "/receive_data", true);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4) {
+            if (xhr.status === 200) {
+                console.log('Data sent successfully');
+                button.style.backgroundColor = 'grey';  // Set button background to grey
+            } else {
+                console.log('Failed to send data');
+                button.style.backgroundColor = 'red';  // Set button background to red
+            }
+        }
+    };
+
+    var data = JSON.stringify({ text: inputText });
+    xhr.send(data);
+
+    // Function to handle empty dropdown data and clear previous options
+    function handleEmptyData(models, dropdownId) {
+        const dropdown = document.getElementById(dropdownId);
+        // Clear existing options first
+        while (dropdown.firstChild) {
+            dropdown.removeChild(dropdown.firstChild);
+        }
+        // Set the button to red if no models are fetched
+        if (models.length === 0) {
+            button.style.backgroundColor = 'red';  // Set button background to red
+        }
+
+        // Create 1 blank option
+        const option = document.createElement('option');
+        option.value = "";
+        option.textContent = "";
+        dropdown.appendChild(option);
+
+        // Populate dropdown with new data
+        models.forEach(model => {
+            const option = document.createElement('option');
+            option.value = model;
+            option.textContent = model;
+            dropdown.appendChild(option);
+        });
+    }
+
+    // Fetch models and populate dropdown
+    fetch('/get-models')
+        .then(response => response.json())
+        .then(models => {
+            handleEmptyData(models, 'model-input');
+        })
+        .catch(error => {
+            console.error('Error loading models:', error);
+            button.style.backgroundColor = 'red';  // Set button background to red
+        });
+
+    // Fetch samplers and populate dropdown
+    fetch('/get-samplers')
+        .then(response => response.json())
+        .then(models => {
+            handleEmptyData(models, 'sampler-input');
+            button.style.backgroundColor = 'green';
+        })
+        .catch(error => {
+            console.error('Error loading models:', error);
+            button.style.backgroundColor = 'red';  // Set button background to red
+        });
+
+    // Fetch LORAs and populate dropdown
+    fetch('/get-loras')
+        .then(response => response.json())
+        .then(models => {
+            handleEmptyData(models, 'lora-input');
+            if (image_data != null) {
+                document.getElementById('lora-input').value = image_data.lora;
+                document.getElementById('model-input').value = image_data.ad_checkpoint;
+                document.getElementById('sampler-input').value = image_data.ad_sampler;
+            }
+        })
+        .catch(error => {
+            console.error('Error loading models:', error);
+            button.style.backgroundColor = 'red';  // Set button background to red
+        });
+
+});

autoexpress/static/js/frontend_settings.js

@@ -0,0 +1,12 @@
+
+var gradientSelector = document.getElementById('gradient-animation-toggle');
+const htmlElement = document.documentElement;
+gradientSelector.addEventListener('change', () => {
+    if (gradientSelector.checked) {
+        htmlElement.style.animationPlayState = "running";
+        console.log('Gradient animation on');
+    } else {
+        htmlElement.style.animationPlayState = "paused";
+        console.log('Gradient animation off');
+    }
+});

autoexpress/static/js/generate.js

@@ -0,0 +1,39 @@
+document.querySelector('.generate-button').addEventListener('click', function () {
+    // Create an XMLHttpRequest to send data
+    var xhr = new XMLHttpRequest();
+
+    xhr.open("POST", "/generate", true);
+    xhr.setRequestHeader("Content-Type", "application/json");
+    xhr.onreadystatechange = function () {
+
+        if (xhr.readyState === 4 && xhr.status === 200) {
+            console.log('Data sent successfully');
+        } else if (xhr.readyState === 4) {
+            console.log('Failed to send data');
+        }
+    };
+
+    // Get the thumbnail element
+    var thumbnailElement = document.querySelector('#drop-zone-thumbnail-image');
+    // Get the base64 string of the image, or an empty string if no image uploaded
+    var thumbnailSrc = thumbnailElement ? thumbnailElement.src : "";
+
+    var data = JSON.stringify({
+        init_images: thumbnailSrc,
+        output_dir: document.getElementById('output-directory').value,
+        ad_inpaint_width: document.getElementById('width-input').value,
+        ad_inpaint_height: document.getElementById('height-input').value,
+        lora: document.getElementById('lora-input').value,
+        seed: document.getElementById('seed-input').value,
+        ad_prompt: document.getElementById('prompt-textfield').value,
+        ad_negative_prompt: document.getElementById('negative-prompt-textfield').value,
+        ad_steps: document.getElementById('steps-input').value,
+        ad_checkpoint: document.getElementById('model-input').value,
+        ad_sampler: document.getElementById('sampler-input').value,
+        ad_clip_skip: document.getElementById('clip-skip-input').value,
+        ad_cfg_scale: document.getElementById('cfg-scale-input').value,
+        ad_denoising_strength: document.getElementById('denoising-strength-input').value,
+    });
+
+    xhr.send(data);
+});

autoexpress/static/js/image_drag_and_drop.js

@@ -0,0 +1,160 @@
+document.querySelectorAll("#drop-zone-input-field").forEach((inputElement) => {
+    const dropZoneElement = inputElement.closest(".drop-zone");
+
+    dropZoneElement.addEventListener("click", (e) => {
+        inputElement.click();
+    });
+
+    inputElement.addEventListener("change", (e) => {
+        if (inputElement.files.length) {
+            updateThumbnail(dropZoneElement, inputElement.files[0]);
+        }
+    });
+
+    dropZoneElement.addEventListener("dragover", (e) => {
+        e.preventDefault();
+        dropZoneElement.classList.add("drop-zone--over");
+    });
+
+    ["dragleave", "dragend"].forEach((type) => {
+        dropZoneElement.addEventListener(type, (e) => {
+            dropZoneElement.classList.remove("drop-zone--over");
+        });
+    });
+
+    dropZoneElement.addEventListener("drop", (e) => {
+        e.preventDefault();
+
+        if (e.dataTransfer.files.length) {
+            inputElement.files = e.dataTransfer.files;
+            updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
+        }
+
+        dropZoneElement.classList.remove("drop-zone--over");
+    });
+});
+
+function updateThumbnail(dropZoneElement, file) {
+    let thumbnailElement = dropZoneElement.querySelector("#drop-zone-thumbnail-image");
+
+    // First time - remove the prompt
+    if (dropZoneElement.querySelector("#upload-file-drop-zone")) {
+        dropZoneElement.querySelector(".drop-zone-prompt").remove();
+    }
+
+    // First time - there is no thumbnail element, so let's create it
+    if (!thumbnailElement) {
+        thumbnailElement = document.createElement("img");
+        thumbnailElement.id = "drop-zone-thumbnail-image";
+        dropZoneElement.appendChild(thumbnailElement);
+    }
+
+    thumbnailElement.dataset.label = file.name;
+
+    // Show thumbnail for image files
+    if (file.type.startsWith("image/")) {
+        const reader = new FileReader();
+
+        reader.readAsDataURL(file);
+        reader.onload = () => {
+            thumbnailElement.src = reader.result;
+            uploadImage(file);  // Call upload function after setting the src
+        };
+    } else {
+        thumbnailElement.src = ""; // Clear the source if it's not an image
+    }
+}
+
+function uploadImage(file) {
+    const formData = new FormData();
+    formData.append('file', file);
+
+    fetch('/upload', {
+        method: 'POST',
+        body: formData,
+    })
+        .then(response => response.json())
+        .then(data => {
+            console.log('Upload successful. Recieved metadata for the image:', data)
+            const uncleaned_data = data.uncleaned_data;
+            const image_data = data.cleaned_data;
+            showRawData(uncleaned_data);
+            updateToolTip(uncleaned_data);
+            updateUI(image_data);
+
+        })
+        .catch(error => console.error('Error uploading file:', error));
+}
+
+
+function showRawData(uncleaned_data) {
+    const element = document.getElementById("info-icon");
+
+    // Show uncleaned data on hover
+    element.addEventListener('mouseenter', () => {
+        element.title = uncleaned_data; // Use title attribute to show data as tooltip
+    });
+
+    // Remove tooltip on mouse leave
+    element.addEventListener('mouseleave', () => {
+        element.removeAttribute('title');
+    });
+}
+
+function updateToolTip(data) {
+    const element = document.getElementById('drop-zone-thumbnail-image');
+
+    // Show uncleaned data on hover
+    element.addEventListener('mouseenter', () => {
+        element.title = data; // Use title attribute to show data as tooltip
+    });
+
+    // Remove tooltip on mouse leave
+    element.addEventListener('mouseleave', () => {
+        element.removeAttribute('title');
+    });
+} 
+
+function updateUI(data) {
+    setDropdownValue('model-input', data.checkpoint);
+    setDropdownValue('sampler-input', data.sampler);
+    setDropdownValue('lora-input', data.lora);
+    setDropdownValue('scheduler-input', data.scheduler);
+    
+    document.getElementById('clip-skip-input').value = data.clip_skip;
+    document.getElementById('seed-input').value = data.seed;
+    
+    document.getElementById('steps-input').value = data.steps;
+
+    document.getElementById('width-input').value = data.inpaint_width;
+    document.getElementById('height-input').value = data.inpaint_height;
+    document.getElementById('cfg-scale-input').value = data.cfg_scale;
+    document.getElementById('denoising-strength-input').value = data.denoising_strength;
+    
+    document.getElementById('prompt-textfield').value = data.prompt;
+    document.getElementById('negative-prompt-textfield').value = data.negative_prompt;
+}
+
+
+function setDropdownValue(elementId, dataValue) {
+    const dropdown = document.getElementById(elementId);
+
+    // Check if the dropdown exists
+    if (!dropdown) {
+        console.warn(`Dropdown with id "${elementId}" not found.`);
+        return;
+    }
+
+    // Check if the option already exists in the dropdown
+    let optionExists = Array.from(dropdown.options).some(option => option.value === dataValue);
+
+    // If the option doesn't exist, add it to the dropdown
+    if (!optionExists) {
+        let newOption = new Option(dataValue, dataValue);
+        dropdown.add(newOption);
+    }
+
+    // Set the dropdown value
+    dropdown.value = dataValue;
+}
+

autoexpress/static/js/image_viewer.js

@@ -0,0 +1,89 @@
+function loadImagesInput(event) {
+    if (event.key === 'Enter') {
+        loadImages();
+    }
+}
+
+function loadImages() {
+    const outputDir = document.getElementById('output-directory').value;
+
+    fetch(`/images/${outputDir}`)
+        .then(response => response.json())
+        .then(files => {
+            // Filter files to only include those with the .png extension
+            images = files.filter(file => file.endsWith('.png')).map(file => `/image/${outputDir}/${file}`);
+            fileNames = files.filter(file => file.endsWith('.png')); // Filter file names as well
+            currentIndex = 0; // Reset index when new images are loaded
+
+            if (images.length > 0) {
+                displayImage(currentIndex);
+            } else {
+                document.getElementsById('image-display').src = "";
+                document.getElementById('expression-image-name').textContent = "No PNG images found.";
+            }
+        })
+        .catch(error => {
+            console.error('Error loading images:', error);
+            alert('Failed to load images.');
+        });
+}
+
+function navigate(direction) {
+    if (images.length > 0) {
+        currentIndex += direction;
+        // Wrap around the navigation
+        if (currentIndex < 0) {
+            currentIndex = images.length - 1;
+        } else if (currentIndex >= images.length) {
+            currentIndex = 0;
+        }
+        displayImage(currentIndex);
+    }
+}
+
+function displayImage(index) {
+    document.getElementById('image-display').src = images[index];
+    //document.getElementById('image-name').textContent = "Expression: " + fileNames[index]);
+    //document.getElementById('image-name').textContent = "Expression: " + fileNames[index].substring(0, fileNames[index].lastIndexOf('.'));
+    document.getElementById('expression-image-name').textContent = fileNames[index].replace(/\.[^.]+$/, '').charAt(0).toUpperCase() + fileNames[index].replace(/\.[^.]+$/, '').slice(1).toLowerCase();
+}
+
+
+
+function calculateAspectRatio(image) {
+    const naturalWidth = image.naturalWidth;
+    const naturalHeight = image.naturalHeight;
+    if (naturalWidth && naturalHeight) {
+        return naturalWidth / naturalHeight;
+    } else {
+        console.error("Error: Image dimensions not available.");
+        return 1; // Default to 1:1 aspect ratio in case of errors
+    }
+}
+
+// Attach event listeners to navigation buttons
+document.querySelector('.nav-left').addEventListener('click', function () {
+    navigate(-1); // Navigate left
+});
+
+document.querySelector('.nav-right').addEventListener('click', function () {
+    navigate(1); // Navigate right
+});
+
+document.querySelector('.load-images').addEventListener('click', function () {
+    loadImages(); // Initial load of images
+});
+
+document.querySelector('#output-directory').addEventListener('change', function () {
+    loadImages();
+});
+
+document.addEventListener('keydown', function (event) {
+    if (event.key === 'ArrowLeft') {
+        navigate(-1);
+        // Add your custom logic here
+    } else if (event.key === 'ArrowRight') {
+        navigate(1);
+        // Add your custom logic here
+    }
+});

autoexpress/static/js/main.js

@@ -0,0 +1,15 @@
+// Function to update input value when slider changes
+function updateInput(inputId) {
+    const slider = document.getElementById(`${inputId}-slider`);
+    const input = document.getElementById(`${inputId}-input`);
+    input.value = slider.value;
+}
+
+// Function to update slider value when input changes
+function updateSlider(inputId) {
+    const slider = document.getElementById(`${inputId}-slider`);
+    const input = document.getElementById(`${inputId}-input`);
+    slider.value = input.value;
+}
+
+

autoexpress/static/js/modal.js

@@ -0,0 +1,7 @@
+function openModal() {
+    document.getElementById('modalOverlay').style.display = 'flex';
+}
+
+function closeModal() {
+    document.getElementById('modalOverlay').style.display = 'none';
+}

autoexpress/static/stylesheet/frontend_settings.css

@@ -0,0 +1,7 @@
+.frontend-settings {
+	margin: 0px;
+	padding: 0px;
+	border-radius: 20px;
+	width: 95%;
+	justify-content: center;
+}

autoexpress/static/stylesheet/image_and_prompt.css

@@ -0,0 +1,152 @@
+.image-and-prompt-container {
+  margin: 0px 15px 0px 15px;
+  padding: 0px;
+  width: 100%;
+}
+
+.drop-zone {
+  justify-content: center;
+  text-align: center;
+  font-weight: 500;
+  font-size: smaller;
+  cursor: pointer;
+  color: var(--font-color);
+  background-color: var(--input-background-color);
+  box-shadow: inset 0 0 0px 1px var(--dark-accent), var(--box-shadow-inset-neg);
+  border-radius: 10px;
+  position: relative;
+  overflow: hidden;
+  transition: background-color 0.3s ease;
+  height: 40vh;
+  z-index:7;
+}
+
+.drop-zone-prompt {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index:7;
+}
+
+.drop-zone:hover {
+  .drop-zone-prompt {
+    transform: scale(1.2);
+    transition: 0.4s;
+  }
+}
+
+#drop-zone-input-field {
+  display: none;
+}
+
+#drop-zone-thumbnail-image {
+  width: auto;
+  max-width: 100%;
+  object-fit: contain;
+  height: 90%;
+  border-radius: 5px;
+  overflow: auto;
+  position: relative;
+  z-index:7;
+}
+
+#drop-zone-thumbnail-image::after {
+  content: attr(data-label);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 2px 0;
+  font-size: small;
+  text-align: center;
+  z-index:7;
+}
+
+#upload-file-drop-zone {
+  color: var(--font-color);
+  font-weight: 400;
+  font-size: medium;
+  width: 80%;
+  z-index:7;
+}
+
+.generate-button {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  background-color: var(--generate-button-color);
+  border-radius: 10px;
+  font-size: large;
+  color: var(--font-color);
+  width: 100%;
+  text-align: center;
+  height: 3rem;
+  margin-top: 5%;
+  margin-bottom: 5%;
+}
+
+.generate-icon {
+  margin-right: 20px;
+  /* Adjust the left position as needed */
+}
+
+.generate-button:hover {
+  background-color: var(--generate-button-hover-color);
+  transform: scale(1.02);
+  transition: 0.4s;
+}
+
+.generate-button:hover .generate-icon {
+  transform: rotateZ(-15deg);
+  transition: 0.4s;
+}
+
+#prompt-textfield {
+  width: 100%;
+  height: calc(var(--input-height) * 4);
+  color: var(--prompt-text-color);
+  background-color: var(--prompt-background-color);
+  border: 1px solid var(--prompt-border-color);
+}
+
+#negative-prompt-textfield {
+  width: 100%;
+  height: calc(var(--input-height) * 4);
+  color: var(--negative-prompt-text-color);
+  background-color: var(--negative-prompt-background-color);
+  border: 1px solid var(--negative-prompt-border-color);
+}
+
+/* Style for the info icon */
+.info-icon {
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  font-size: 18px;
+  cursor: pointer;
+  color: var(--icon-color);
+  z-index:9;
+}
+
+/* Tooltip styling (optional) */
+.tooltip {
+  display: none;
+  position: absolute;
+  bottom: 40px;
+  right: 10px;
+  background-color: #333;
+  color: #fff;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 14px;
+  z-index: 20;
+  max-width: 200px;
+}
+
+/* Show tooltip when info icon is clicked */
+.input-container.drop-zone .tooltip.show {
+  display: block;
+}

autoexpress/static/stylesheet/image_viewer.css

@@ -0,0 +1,102 @@
+.image-output-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
+}
+
+.directory-bar-container {
+    display: flex;
+    margin: 10px;
+}
+
+.display-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    flex: 1;
+}
+
+.image-name-column-container {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.image-container {
+    flex: 1;
+    display: flex;
+    align-self: center;
+    object-fit: scale-down;
+}
+
+#image-display {
+    display: flex;
+    object-fit: contain;
+    width: 95%;
+    height: 95%;
+}
+
+#image-display:empty {
+    background-color: transparent;
+}
+
+#expression-image-name {
+    background-color: var(--input-background-color);
+    outline: none;
+    border: none;
+    border-radius: 10px;
+
+    color: var(--expression-name-font-color);
+    font-size: larger;
+    width: 50%;
+    padding: 5px 5px 5px 5px;
+    margin-top: -2.5%;
+    z-index: 3;
+    align-self: center;
+    text-align: center;
+}
+
+#expression-image-name:empty {
+    background-color: transparent;
+}
+
+
+.output-directory {
+    font-size: large;
+    color: var(--output-directory-font-color);
+    background-color: var(--input-background-color);
+    height: var(--input-height);
+    border: none;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-right: 10px;
+    border-radius: 10px;
+
+    transition: box-shadow 0.3s ease-in-out;
+    flex-grow: 1;
+}
+
+.nav-button {
+    margin: 10px;
+    display: flex;
+    color: var(--knob-color);
+    height: calc(var(--input-height) * 1.75);
+    width: calc(var(--input-height) * 1.75);
+    cursor: pointer;
+    border: none;
+    border-radius: 100%;
+}
+
+.nav-icon {
+    display: flex;
+    font-size: xx-large;
+}
+
+.load-images {
+    color: var(--knob-color);
+    height: calc(var(--input-height));
+    width: calc(var(--input-height));
+
+}

autoexpress/static/stylesheet/main.css

@@ -0,0 +1,442 @@
+@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");
+
+/*NOTES:*/
+/*
+    Icons are now a font: lucide-icon-font
+    Usage: Add a class with the name of the icon
+    EXAMPLE:
+        <div class="icon-link-2"></div>
+    IMPORTANT, when getting the name of the icon add "icon-" in front of it.
+    circle-chevron-left = icon-circle-chevron-left
+    Icons can be looked up here: https://lucide.dev/icons/?focus
+    NOTE: [class^="icon-"], [class*=" icon-"] is part of the font and in main css to style all the icons
+*/
+
+:root {
+    --font-family: "Quicksand", sans-serif;
+    --font-size: 16px;
+
+    --input-height: 2rem;
+
+    /* COLORS */
+    --font-color: white;
+    --icon-color: white;
+    --knob-color: rgb(64, 210, 255);
+
+    /* 'Border' (shadows) Color */
+    --dark-accent: rgba(0, 0, 0, 0.007);
+
+    /* 'Border' (shadows) Color Light, (hovers)*/
+    --light-accent: rgb(0, 0, 0);
+
+    /* HEADER COLORS */
+    --header-font-color: #ffffff;
+
+    /* Labels Color */
+    --label-font-color: rgb(201, 201, 201);
+
+    /*input field font color*/
+    --input-font-color: rgb(201, 201, 201);
+
+    /*specific fields*/
+    --input-number-color: var(--input-font-color);
+    --input-select-color: var(--input-font-color);
+    --textarea-font-color: var(--input-font-color);
+    --prompt-text-color: var(--input-font-color);
+    --negative-prompt-text-color: var(--input-font-color);
+    --prompt-border-color: rgba(0, 128, 0, 0.8);
+    --negative-prompt-border-color: rgba(255, 0, 0, 0.8);
+    --expression-name-font-color: var(--input-font-color);
+    --output-directory-font-color: var(--input-font-color);
+
+    /* filter over the background */
+    --body-background-filter-color: rgba(0, 0, 0, 0.6);
+    /* the background of the fields*/
+    --input-background-color: rgba(65, 65, 65, 0.4);
+
+    /* button colors */
+    --button-color: rgba(0, 0, 0, 0.6);
+
+    /*main panels color*/
+    --panel-background-color: rgba(5, 5, 5, 0.5);
+
+    /*background color of positive prompts textareas*/
+    --prompt-background-color: rgba(0, 0, 0, 0.1);
+    /*background color of negative prompts textareas*/
+    --negative-prompt-background-color: rgba(0, 0, 0, 0.1);
+
+    /*generate button color*/
+    --generate-button-color: rgba(69, 142, 77, 1);
+
+    /*generate button hover color*/
+    --generate-button-hover-color: rgb(94, 201, 106);
+
+    --hover-outline-color: rgba(0, 153, 255, 0);
+    --hover-shadow-color: rgb(116, 188, 248);
+    --focus-outline-color: rgb(0, 0, 0);
+    --focus-shadow-color: rgb(116, 188, 248);
+
+    /* OBJECTS */
+
+    --box-shadow-panes: inset 0 0 8px 0px var(--dark-accent);
+    --box-shadow-inset-pos: inset 2px 2px 5px 0px var(--dark-accent);
+    /*bottom right inner shadow glow for textarea/button/ etc etc*/
+    --box-shadow-inset-neg: inset -2px -2px 5px 0px var(--dark-accent);
+
+    --hover-outline: 0px auto var(--hover-outline-color);
+    --hover-box-shadow: 0 0 1px  1px var(--hover-shadow-color);
+    /*outline width/style/color*/
+    --focus-outline: 1px auto var(--focus-outline-color);
+    --focus-box-shadow: 0 0 2px 2px var(--focus-shadow-color);
+
+    --realistic-switch-bg-color: #332f31;
+    --anime-switch-bg-color: #332f31;
+}
+
+html {
+    font-size: var(--font-size);
+    font-family: var(--font-family);
+    background: linear-gradient(-45deg, #5fe691, #f28e8e, #44c4f3, #814bff);
+    background-size: 200% 200%;
+    overflow: hidden;
+    animation: gradient 120s ease infinite;
+}
+
+@keyframes gradient {
+    0% {
+        background-position: 0% 50%;
+    }
+
+    50% {
+        background-position: 100% 50%;
+    }
+
+    100% {
+        background-position: 0% 50%;
+    }
+}
+
+
+body {
+    margin: 0;
+    border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--body-background-filter-color);
+    -webkit-backdrop-filter: blur(10px);
+    backdrop-filter: blur(10px);
+}
+
+.container {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: center;
+    align-items: stretch;
+    padding: 0px;
+    height: 100vh;
+    width: 95vw;
+}
+
+.left-pane {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    width: 25%;
+    max-width: 350px;
+    min-width: max(350px, 25%);
+    background-color: var(--panel-background-color);
+    border-radius: 20px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin: 20px;
+    padding: 15px;
+    /* border-right: 3rem; */
+    box-shadow: var(--box-shadow-panes);
+}
+
+
+.center-pane {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    max-width: 45%;
+    min-width: max(300px, 30%);
+    background-color: var(--panel-background-color);
+    border-radius: 20px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    padding: 15px;
+    box-shadow: var(--box-shadow-panes);
+}
+
+.right-pane {
+    flex-grow: 2;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+    max-width: 40%;
+    min-width: max(350px, 40%);
+    background-color: var(--panel-background-color);
+    border-radius: 20px;
+    margin: 20px;
+    padding: 15px;
+    overflow: hidden;
+    box-shadow: var(--box-shadow-panes);
+}
+
+
+.input-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    margin: 5px 5px 5px 0px;
+    padding: 5px 0px 0px 0px;
+    width: 100%;
+}
+
+.input-container.column {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 100%;
+    width: fit-content;
+    align-self: flex-end;
+    margin: 0px;
+    padding: 0px;
+}
+
+/*select container is two columns, and slider container is three*/
+
+.input-container.select-container :first-child,
+.input-container.slider-container :first-child {
+    width: 30%;
+    flex: 0 0 auto;
+}
+
+.input-container.slider-container :last-child {
+    width: 15%;
+    flex: 0 0 auto;
+}
+
+.input-container.grid-container {
+    justify-content: space-between;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    color: var(--header-font-color);
+    text-align: center;
+    margin: 0px;
+    padding: 10px;
+}
+
+select {
+    flex-grow: 1;
+    background-color: var(--input-background-color);
+
+    color: var(--input-select-color);
+    border: none;
+
+    font-size: small;
+    height: var(--input-height);
+    border-radius: 10px;
+    min-width: 25%;
+    width: 60%;
+    max-width: 75%;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+    display: flex;
+    align-self: center;
+    justify-content: center;
+    align-items: center;
+    font-size: x-large;
+    color: var(--icon-color);
+}
+
+select:hover,
+input:hover,
+textarea:hover,
+button:hover,
+.output-directory:hover,
+.drop-zone:hover,
+.drop-zone--over,
+.slider:hover {
+    box-shadow: var(--hover-box-shadow),
+        var(--box-shadow-inset-neg);
+    outline: var(--hover-outline);
+}
+
+input:focus,
+textarea:focus {
+    box-shadow: var(--focus-box-shadow);
+    outline: var(--focus-outline);
+}
+
+button {
+    display: flex;
+    align-self: center;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    color: var(--input-font-color);
+    background-color: var(--button-color);
+    border-radius: 10px;
+    box-shadow: var(--box-shadow-inset-neg);
+    min-width: calc(var(--input-height)*1.5);
+}
+
+button:hover {
+    background-color: var(--icon-color);
+
+    [class^="icon-"],
+    [class*=" icon-"] {
+        color: var(--input-background-color);
+    }
+}
+
+input,
+select {
+    height: var(--input-height);
+    border: none;
+    outline: none;
+    box-shadow: var(--box-shadow-inset-pos);
+}
+
+/********** Range Input Styles **********/
+/*Range Reset*/
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    height: 0.5rem;
+    background: transparent;
+    cursor: pointer;
+    width: 15rem;
+}
+
+/* slider thumb */
+input[type="range"]::-webkit-slider-thumb {
+    box-shadow: var(--box-shadow-inset-neg);
+    appearance: none;
+    background-color: var(--knob-color);
+    height: calc(var(--input-height) * 0.75);
+    width: calc(var(--input-height) * 0.75);
+    margin-top: calc(-1em * 0.75);
+    border-radius: 100%;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    box-shadow: var(--box-shadow-inset-pos);
+    background-color: var(--input-background-color);
+    border-radius: 15px;
+    height: 100%;
+    width: 100%;
+}
+
+
+/* Adjust input number appearance */
+input[type="number"] {
+    text-align: center;
+    height: var(--input-height);
+    margin-left: 5px;
+    padding-right: 1.5rem;
+    padding-left: 5px;
+    color: var(--input-number-color);
+    border: none;
+    border-radius: 10px;
+    background-color: var(--input-background-color);
+
+    &::-webkit-inner-spin-button {
+        opacity: 0.5 !important;
+        background-color: var(--input-background-color);
+        color: var(--input-font-color);
+        height: 100%;
+        width: 1.2rem;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        cursor: pointer;
+    }
+}
+
+
+label {
+    color: var(--label-font-color);
+    font-size: medium;
+    font-weight: 600;
+    padding: 5px;
+
+}
+
+
+
+textarea {
+    background-color: var(--input-background-color);
+    color: var(--textarea-font-color);
+    border: 0px;
+    padding: 10px;
+    border-radius: 10px;
+    font-size: large;
+    resize: vertical;
+    transition: box-shadow 0.3s ease-in-out;
+    box-shadow: var(--box-shadow-inset-pos),
+        var(--box-shadow-inset-neg);
+
+}
+
+
+/*////////////////scrollbar////////////////*/
+
+
+::-webkit-scrollbar {
+    display: none;
+    width: 0.5rem;
+    height: 0.5rem;
+    scrollbar-gutter: stable;
+    border: none;
+    padding: 0px;
+    margin: 0px;
+}
+
+::-webkit-scrollbar-track {
+    box-shadow: var(--box-shadow-inset-pos);
+    background-color: var(--input-background-color);
+    border-radius: 10px;
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+
+::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-clip: content-box;
+    box-shadow: var(--box-shadow-inset-neg);
+    background-color: var(--knob-color);
+}
+
+::-webkit-scrollbar-thumb:vertical {
+    min-height: 40px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+    min-width: 40px;
+}
+
+::-webkit-scrollbar-corner {
+    appearance: none;
+}

autoexpress/static/stylesheet/modal.css

@@ -0,0 +1,40 @@
+/* Style for settings cog icon */
+.settings-cog {
+    font-size: 24px;
+    cursor: pointer;
+
+}
+
+/* Modal background overlay */
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.8);
+    display: none;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+}
+
+/* Modal content styling */
+.modal-content {
+    background-color: var(--panel-background-color);
+    padding: 20px;
+    border-radius: 1.5rem;
+    box-shadow: 0 4px 8px rgba(64, 210, 255, 0.6);
+    width: 600px;
+    max-width: 80%;
+    color: #fff;
+    text-align: center;
+}
+
+/* Close button style */
+.close-btn {
+    font-size: 30px;
+    color:red;
+    cursor: pointer;
+    float: right;
+}

autoexpress/static/stylesheet/sidebar.css

@@ -0,0 +1,71 @@
+.sidebar {
+    margin: 0px 15px 0px 15px;
+    padding: 0px;
+    width: 100%;
+}
+
+.sidebar-title {
+    margin: 0px 0px 0px 0px;
+    padding: 0px;
+    color: var(--font-color);
+    font-size: large;
+    font-weight: bold;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.sidebar-logo{
+    height: auto;
+    width: 12%;
+    position: relative;
+    right:5%
+}
+
+#ip-input {
+    display: flex;
+    flex: auto;
+    background-color: var(--input-background-color);
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-right: 10px;
+    margin-right: 10px;
+    border-radius: 10px;
+    min-width: 1px;
+    color: var(--input-number-color);
+
+}
+
+.sidebar-add-space {
+    padding: 25px;
+}
+
+input:checked+.anime {
+    transition: .4s;
+    background-color: var(--realistic-switch-bg-color);
+}
+
+input:not(:checked)+.anime {
+    transition: .4s;
+    background-color: var(--anime-switch-bg-color);
+}
+
+#seed-input {
+    width: 7rem;
+}
+
+#clip-skip-input {
+    width: 3rem;
+}
+
+#seed-input {
+    padding-right: 0.5rem;
+
+    &::-webkit-inner-spin-button {
+        appearance: none;
+        opacity: 0 !important;
+        cursor: auto;
+        width: 0px;
+    }
+
+}

autoexpress/static/stylesheet/slider_object.css

@@ -0,0 +1,77 @@
+ /* The switch - the box around the slider */
+ .switch {
+     position: relative;
+     text-align: center;
+     display: inline-block;
+     margin-right: 0px;
+     padding-right: 0px;
+     max-width: 60px;
+     min-width: 60px;
+     height: var(--input-height);
+     font-size: large;
+ }
+
+ .switch-container {
+     width: 100%;
+     display: flex;
+     flex-direction: row;
+     justify-content: space-evenly;
+     align-items: center;
+     margin: 5px 5px 5px 5px;
+ }
+
+ .switch-label {
+     text-align: center;
+     font-size: large;
+     margin: 0px 10px 0px 10px;
+ }
+
+ /* Hide default HTML checkbox */
+ .switch input {
+     opacity: 0;
+     width: 0;
+     height: 0;
+ }
+
+ /* The slider */
+ .slider {
+     position: absolute;
+     cursor: pointer;
+     height: var(--input-height);
+     width: calc(var(--input-height) * 2);
+     top: 0;
+     left: 0;
+     right: 0;
+     bottom: 0;
+     background-color: var(--input-background-color);
+     border: 2px solid var(--knob-color);
+     box-shadow: inset 0 0 0px 1px var(--light-accent),
+         var(--box-shadow-inset-neg);
+     outline: 1px var(--knob-color);
+ }
+
+ /*knob*/
+ .slider:before {
+     position: absolute;
+     content: "";
+     height: var(--input-height);
+     width: calc(var(--input-height));
+     left: 0px;
+     bottom: 0px;
+     background-color: var(--knob-color);
+     box-shadow: var(--box-shadow-inset-pos);
+     transition: .3s;
+ }
+
+ input:checked+.slider:before {
+     transform: translateX(100%);
+ }
+
+ /* Rounded sliders */
+ .slider.round {
+     border-radius: 66px;
+ }
+
+ .slider.round:before {
+     border-radius: 100%;
+ }

autoexpress/templates/index.html

@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+
+<!--
+/*NOTES:*/
+/*
+    Icons are now a font: lucide-icon-font
+    Usage: Add a class with the name of the icon
+    EXAMPLE:
+        <div class="icon-link-2"></div>
+    IMPORTANT, when getting the name of the icon add "icon-" in front of it.
+    circle-chevron-left = icon-circle-chevron-left
+    Icons can be looked up here: https://lucide.dev/icons/?focus
+    NOTE: [class^="icon-"], [class*=" icon-"] is part of the font and in main css to style all the icons
+
+    Authors: Deepratna Awale, Avery Velfaire
+*/
+-->
+
+<html id="bg" lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Auto Express UI</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AveryVeilfaire/lucide-font@main/lucide.css">
+  <link rel="stylesheet" href="{{ url_for('static', filename='stylesheet/main.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='stylesheet/sidebar.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='stylesheet/modal.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='stylesheet/image_and_prompt.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='stylesheet/image_viewer.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='stylesheet/slider_object.css') }}" />
+  <link rel="stylesheet" href="{{ url_for('static', filename='stylesheet/frontend_settings.css') }}" />
+  <link rel="shortcut icon" href="{{ url_for('static', filename='ico/favicon-rounded.png') }}" />
+  <meta name="theme-color" content="#14151f">
+  <!-- Dark/Light mode support <meta name="color-scheme" content="dark light" /> -->
+</head>
+
+<body>
+  <div class="container">
+    <div class="left-pane">
+      <!-- Sidebar -->
+      <div class="sidebar">
+        <div class="sidebar-title">
+          <img class="sidebar-logo" src="{{ url_for('static', filename='ico/favicon-rounded.png') }}" alt="Logo"/>
+          <h1>Parameters</h1>
+        </div>
+
+        <!-- A1111 API Url -->
+
+        <div class="input-container slider-container">
+          <label for="ip-input">A1111 Api</label>
+          <input id="ip-input" name="ip-input" type="text" placeholder="127.0.0.1:7860" />
+          <button class="sd-connect">
+            <div class="icon-link-2"></div>
+          </button>
+        </div>
+
+        <!-- Model Dropdown -->
+        <div class="input-container select-container">
+          <label for="model-input">Model</label>
+          <select id="model-input" name="model">
+            <!-- Add more options as needed -->
+          </select>
+        </div>
+
+        <!-- Sampler Dropdown -->
+        <div class="input-container select-container">
+          <label for="sampler-input">Sampler</label>
+          <select id="sampler-input" name="sampler">
+            <!-- Add more options as needed -->
+          </select>
+        </div>
+
+        <!-- Scheduler Dropdown -->
+        <div class="input-container select-container">
+          <label for="scheduler-input">Scheduler</label>
+          <select id="scheduler-input" name="scheduler">
+            <!-- Add more options as needed -->
+          </select>
+        </div>
+
+        <!-- Lora Dropdown -->
+        <div class="input-container select-container">
+          <label for="lora-input">Lora</label>
+          <select id="lora-input" name="lora">
+            <!-- Add more options as needed -->
+          </select>
+        </div>
+
+
+        <div class="input-container grid-container">
+          <!-- Clip skip Input -->
+          <div class="input-container">
+            <label for="clip-skip-input">Clip Skip</label>
+            <input type="number" id="clip-skip-input" name="clip-skip" value="2" />
+          </div>
+          <!-- Seed Input -->
+          <div class="input-container">
+            <label id= "seed-label" for="seed-input">Seed</label>
+            <input type="number" id="seed-input" name="seed-input" value="-1" min="-1" />
+          </div>
+        </div>
+
+        <!-- Steps Slider + Input -->
+        <div class="input-container slider-container">
+          <label for="steps-slider">Steps</label>
+          <input type="range" id="steps-slider" name="steps-slider" value="32" min="0" max="40" step="1"
+            oninput="updateInput('steps')" />
+          <input type="number" id="steps-input" name="steps-input" value="32" min="0" max="40" step="1"
+            oninput="updateSlider('steps')" />
+        </div>
+
+        <!-- Width Slider + Input -->
+        <div class="input-container slider-container">
+          <label for="width-slider">Width</label>
+          <input type="range" id="width-slider" name="width-slider" value="512" min="0" max="2048" step="1"
+            oninput="updateInput('width')" />
+          <input type="number" id="width-input" name="width-input" value="512" min="0" max="2048" step="1"
+            oninput="updateSlider('width')" />
+        </div>
+
+        <!-- Height Slider + Input -->
+        <div class="input-container slider-container">
+          <label for="height-slider">Height</label>
+          <input type="range" id="height-slider" name="height-slider" value="768" min="0" max="2048" step="1"
+            oninput="updateInput('height')" />
+          <input type="number" id="height-input" name="height-input" value="768" min="0" max="2048" step="1"
+            oninput="updateSlider('height')" />
+        </div>
+
+        <!-- CFG Scale Slider + Input -->
+        <div class="input-container slider-container">
+          <label for="cfg-scale-slider">CFG Scale</label>
+          <input type="range" id="cfg-scale-slider" name="cfg-scale-slider" value="7" min="0" max="20" step="0.5"
+            oninput="updateInput('cfg-scale')" />
+          <input type="number" id="cfg-scale-input" name="cfg-scale-input" value="7" min="0" max="20" step="0.5"
+            oninput="updateSlider('cfg-scale')" />
+        </div>
+
+        <!-- Denoising Strength Slider + Input -->
+        <div class="input-container slider-container">
+          <label for="denoising-strength-slider">Denoising Strength</label>
+          <input type="range" id="denoising-strength-slider" name="denoising-strength-slider" min="0" max="1"
+            value="0.5" step="0.05" oninput="updateInput('denoising-strength')" />
+          <input type="number" id="denoising-strength-input" name="denoising-strength-input" min="0" max="1" value="0.5"
+            oninput="updateSlider('denoising-strength')" />
+        </div>
+
+        <div class="sidebar-add-space"></div>
+
+        <!-- Style Selector -->
+        <div class="switch-container">
+          <label class="switch-label">Anime</label>
+          <label class="switch">
+            <input type="checkbox" id="styleSelector" /> <!--checked-->
+            <span class="slider round anime"></span>
+          </label>
+          <label class="switch-label">Realistic</label>
+        </div>
+      
+
+        <div class="sidebar-add-space"></div>
+        <!-- Settings cog icon -->
+        <span class="icon-settings settings-cog" onclick="openModal()"></span>
+        
+        <!-- Modal overlay and content -->
+        <div id="modalOverlay" class="modal-overlay">
+          <div class="modal-content">
+            <span class="close-btn" onclick="closeModal()">×</span>
+            <!-- FrontEnd Settings (Modal Content) -->
+            <div class="frontend-settings">
+              <h1>GUI Settings</h1>
+              <h2>Background</h2>
+              <div class="input-container">
+                <label>BG Animation</label>
+                <div class="switch-container">
+                  <label class="switch-label">Off</label>
+                  <label class="switch">
+                    <input type="checkbox" id="gradient-animation-toggle" checked />
+                    <span class="slider round"></span>
+                  </label>
+                  <label class="switch-label">On</label>
+                </div>
+              </div>
+            </div>
+            <!-- End of FrontEnd Settings (Modal Content) -->
+          </div>
+        </div>
+        <!-- End of Modal overlay and content -->
+      </div>
+    </div>
+    <div class="center-pane">
+      <div class="image-and-prompt-container">
+
+        <div class="input-container drop-zone">
+          <div class="drop-zone-prompt">
+            <div class="icon-upload"></div>
+            <span id="upload-file-drop-zone">Drop file here or click to upload image</span>
+          </div>
+          <input type="file" name="image" id="drop-zone-input-field" />
+          <!-- Info icon at bottom right -->
+          <span class="icon-info info-icon" id="info-icon" title="Drop image and hover on this icon or the image to see the raw generation data. This can help you fill in the missing parameters manually if not autodetected."></span>
+          <div class="tooltip" id="tooltip"></div>
+        </div>
+
+        <button type="submit" class="generate-button" data-lucide="image-play">
+          <div class="generate-icon icon-image-play"></div>
+          Generate
+        </button>
+        <div class="input-container">
+          <textarea type="text" id="prompt-textfield" name="prompt-textfield"
+            placeholder="Prompt"></textarea>
+        </div>
+        <div class="input-container">
+          <textarea type="text" id="negative-prompt-textfield" name="negative-prompt-textfield"
+            placeholder="Negative prompt..."></textarea>
+        </div>
+    </div>
+    </div>
+    <div class="right-pane">
+      <div class="image-output-container">
+        <div class="input-container">
+          <input type="text" class="output-directory" id="output-directory" name="output-directory"
+            placeholder="Character_Name" onkeypress="loadImagesInput(event)" />
+          <button class="load-images" onclick="loadImages()">
+            <div class="icon-refresh-cw"></div>
+          </button>
+        </div>
+        <div class="display-container">
+          <button class="nav-left" onclick="navigate(-1)">
+            <div class="nav-icon icon-circle-chevron-left"></div>
+          </button>
+          <div class="image-name-column-container">
+            <div class="image-container">
+              <img id="image-display" src="" alt="" onload="this.style.display='flex'"
+                onerror="this.style.display='none'" />
+            </div>
+            <div id="expression-image-name"></div>
+          </div>
+          <button class="nav-right" onclick="navigate(1)">
+            <div class="nav-icon icon-circle-chevron-right"></div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+  <!DOCTYPE html>
+
+  <script src="{{ url_for('static', filename='js/main.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/connect.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/modal.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/image_drag_and_drop.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/generate.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/image_viewer.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/anime_toggle.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/frontend_settings.js') }}"></script>
+</body>
+
+</html>

autoexpress/views.py

@@ -0,0 +1,210 @@
+from flask import Flask, request, jsonify, render_template, send_from_directory
+from werkzeug.utils import secure_filename
+
+import os
+import pathlib
+
+from autoexpress.modules import (
+    a1111_client,
+    image_parser,
+    expression_generator,
+)
+
+from loguru import logger as log
+import requests
+import re
+
+
+autoexpress = Flask(__name__)
+sd = a1111_client.A1111Client()
+
+uploaded = False
+filepath = None
+is_realistic = False
+
+# Assuming you want to save uploaded files in a folder called 'uploads'
+UPLOAD_FOLDER = "uploads"
+MAX_FILES = 10
+autoexpress.config["UPLOAD_FOLDER"] = UPLOAD_FOLDER
+
+if not os.path.exists(UPLOAD_FOLDER):
+    os.makedirs(UPLOAD_FOLDER)
+
+
+# AutoExpress UI
+@autoexpress.route("/", methods=["GET"])
+def index():
+    return render_template("index.html")
+
+
+# Stable diffusion API Calls
+@autoexpress.route("/get-models")
+def get_models():
+    # Simulate fetching models from an API
+    try:
+        models = sd.models
+    except requests.exceptions.ConnectionError:
+        models = []
+    return jsonify(models)
+
+
+@autoexpress.route("/get-samplers")
+def get_samplers():
+    # Simulate fetching models from an API
+    try:
+        samplers = sd.samplers
+    except requests.exceptions.ConnectionError:
+        samplers = []
+    return jsonify(samplers)
+
+
+@autoexpress.route("/get-loras")
+def get_loras():
+    # Simulate fetching models from an API
+    try:
+        loras = sd.loras
+    except requests.exceptions.ConnectionError:
+        loras = []
+    return jsonify(loras)
+
+# End of Stable diffusion API Calls
+
+# Image uploaded
+@autoexpress.route("/upload", methods=["POST"])
+def upload_file():
+    if "file" not in request.files:
+        return jsonify({"error": "No file part"}), 400
+
+    file = request.files["file"]
+
+    if file.filename == "":
+        return jsonify({"error": "No selected file"}), 400
+
+    if file and allowed_file(file.filename):
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(autoexpress.config["UPLOAD_FOLDER"], filename)
+        file.save(filepath)
+
+        full_image_data = {"cleaned_data": None, "uncleaned_data": None}
+        full_image_data["cleaned_data"] = image_parser.generate_parameters(filepath)
+        full_image_data["uncleaned_data"] = image_parser.generate_uncleaned_params(filepath)
+
+        return (
+            jsonify(full_image_data),
+            200,
+        )
+
+
+def allowed_file(filename):
+    return "." in filename and filename.rsplit(".", 1)[1].lower() in {
+        "png",
+        "jpg",
+        "jpeg",
+        "gif",
+    }
+
+# Try connecting to SD
+@autoexpress.route("/receive_data", methods=["POST"])
+def receive_data():
+
+    data = request.json
+    
+    url = data["text"]
+
+    if url in [""]:
+        sd.setURL("http://127.0.0.1:7860")
+        log.info(f"No url found.")
+    
+    elif url[-1] in ["/"]:
+        sd.setURL(url[:-1])
+
+    elif "http" in url:
+        sd.setURL(url)
+
+    else:
+        sd.setURL("http://" + url)
+
+    log.info("SD URL set to: " + sd.getURL())
+
+    return jsonify({"status": "success"})
+
+# Generate Images
+@autoexpress.route("/generate", methods=["POST"])
+def generate():
+    data = request.json
+
+    adetailer_exists = sd.is_extension()
+
+    if not adetailer_exists:
+        return jsonify({"status": "Failed", "message": "Could not find adetailer"})
+
+    matches = get_lora_from_prompt(data.get("ad_prompt"))
+    img_str = data.get("init_images")
+
+    output_dir = data.get("output_dir") or "New_Character"
+
+    if not matches and data.get("lora") not in [""]:
+        data["ad_prompt"] += f" <lora: {data.get('lora')}: 0.8>"
+
+    data.pop("output_dir")
+    data.pop("lora")
+    data.pop("init_images")
+
+    log.info("Using the following generation parameters:\n" + str(data))
+
+    try:
+        expression_generator.generate_expressions(
+            sd=sd,
+            image_str=img_str,
+            output_path=f"Output/{output_dir}",
+            settings=data,
+            is_realistic=is_realistic,
+        )
+    except KeyboardInterrupt:
+        sd.interrupt()
+
+    # Process data here, e.g., generate text based on the model and prompt
+    return jsonify({"status": "success", "message": "Data processed successfully"})
+
+
+def get_lora_from_prompt(text):
+    if not text:
+        return []
+    # Regular expression pattern to find text and strength
+    pattern = r"<lora:(.*?):(.*?)>"
+    # Find all matches
+    matches = re.findall(pattern, text)
+    return matches
+
+
+@autoexpress.route("/images/<path:subpath>")
+def list_images(subpath):
+    root = pathlib.Path(autoexpress.root_path).parent
+    directory = os.path.join(root, "Output", subpath)
+    log.info("Attempting to list images from:", directory)  # Debugging statement
+    try:
+        files = [
+            f
+            for f in os.listdir(directory)
+            if os.path.isfile(os.path.join(directory, f))
+        ]
+        return jsonify(files)
+    except FileNotFoundError:
+        log.info("Directory not found:", directory)  # Debugging statement
+        return jsonify({"error": "Directory not found"}), 404
+
+
+@autoexpress.route("/image/<path:filename>")
+def get_image(filename):
+    """Endpoint to serve images from the entire 'Output' directory."""
+    root_path = pathlib.Path(autoexpress.root_path).parent
+    return send_from_directory(os.path.join(root_path, "Output"), filename)
+
+
+@autoexpress.route("/toggle", methods=["POST"])
+def handle_toggle():
+    global is_realistic
+    data = request.get_json()
+    is_realistic = data.get("isRealistic")
+
+    return jsonify({"message": f"Is realistic status set to {is_realistic}"})

requirements.txt

@@ -0,0 +1,6 @@
+flask
+sd-parsers==0.4
+matplotlib
+pillow
+requests
+loguru

startup.bat

@@ -0,0 +1,2 @@
+REM .venv\Scripts\activate
+flask --app autoexpress run

startupDebug.bat

@@ -0,0 +1,2 @@
+REM .venv\Scripts\activate
+flask --app autoexpress run --debug