frontend

.gitattributes

@@ -33,3 +33,7 @@ saved_model/**/* 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
+viteGradio/dist/roots2_rgbd.c6f8f977.png filter=lfs diff=lfs merge=lfs -text
+viteGradio/public/intro2.mp4 filter=lfs diff=lfs merge=lfs -text
+viteGradio/src/assets/input.png filter=lfs diff=lfs merge=lfs -text
+viteGradio/src/assets/roots2_rgbd.png filter=lfs diff=lfs merge=lfs -text

viteGradio/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

viteGradio/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

viteGradio/README.md

@@ -0,0 +1,397 @@
+import gradio as gr
+from huggingface_hub import login, HfFileSystem, HfApi, ModelCard
+import os
+import spaces
+import random
+import torch
+
+is_shared_ui = False
+
+hf_token = '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'
+login(token=hf_token)
+
+fs = HfFileSystem(token=hf_token)
+api = HfApi()
+
+device="cuda" if torch.cuda.is_available() else "cpu"
+
+from diffusers import ControlNetModel, StableDiffusionXLControlNetPipeline, AutoencoderKL
+from diffusers.utils import load_image
+from PIL import Image
+import torch
+import numpy as np
+import cv2
+
+vae = AutoencoderKL.from_pretrained("madebyollin/sdxl-vae-fp16-fix", torch_dtype=torch.float16)
+
+controlnet = ControlNetModel.from_pretrained(
+    "diffusers/controlnet-canny-sdxl-1.0",
+    torch_dtype=torch.float16
+)
+
+def check_use_custom_or_no(value):
+    if value is True:
+        return gr.update(visible=True)
+    else:
+        return gr.update(visible=False)
+
+def get_files(file_paths):
+    last_files = {}  # Dictionary to store the last file for each path
+
+    for file_path in file_paths:
+        # Split the file path into directory and file components
+        directory, file_name = file_path.rsplit('/', 1)
+    
+        # Update the last file for the current path
+        last_files[directory] = file_name
+    
+    # Extract the last files from the dictionary
+    result = list(last_files.values())
+
+    return result
+
+def load_model(model_name):
+
+    if model_name == "":
+        gr.Warning("If you want to use a private model, you need to duplicate this space on your personal account.")
+        raise gr.Error("You forgot to define Model ID.")
+
+    # Get instance_prompt a.k.a trigger word
+    card = ModelCard.load(model_name)
+    repo_data = card.data.to_dict()
+    instance_prompt = repo_data.get("instance_prompt")
+
+    if instance_prompt is not None:
+        print(f"Trigger word: {instance_prompt}")
+    else:
+        instance_prompt = "no trigger word needed"
+        print(f"Trigger word: no trigger word needed")
+
+    # List all ".safetensors" files in repo
+    sfts_available_files = fs.glob(f"{model_name}/*safetensors")
+    sfts_available_files = get_files(sfts_available_files)
+
+    if sfts_available_files == []:
+        sfts_available_files = ["NO SAFETENSORS FILE"]
+
+    print(f"Safetensors available: {sfts_available_files}")
+
+    return model_name, "Model Ready", gr.update(choices=sfts_available_files, value=sfts_available_files[0], visible=True), gr.update(value=instance_prompt, visible=True)
+
+def custom_model_changed(model_name, previous_model):
+    if model_name == "" and previous_model == "" :
+        status_message = ""      
+    elif model_name != previous_model:
+        status_message = "model changed, please reload before any new run"
+    else:
+        status_message = "model ready"
+    return status_message
+
+def resize_image(input_path, output_path, target_height):
+    # Open the input image
+    img = Image.open(input_path)
+
+    # Calculate the aspect ratio of the original image
+    original_width, original_height = img.size
+    original_aspect_ratio = original_width / original_height
+
+    # Calculate the new width while maintaining the aspect ratio and the target height
+    new_width = int(target_height * original_aspect_ratio)
+
+    # Resize the image while maintaining the aspect ratio and fixing the height
+    img = img.resize((new_width, target_height), Image.LANCZOS)
+
+    # Save the resized image
+    img.save(output_path)
+
+    return output_path
+
+@spaces.GPU
+def infer(use_custom_model, model_name, weight_name, custom_lora_weight, image_in, prompt, negative_prompt, preprocessor, controlnet_conditioning_scale, guidance_scale, inf_steps, seed, progress=gr.Progress(track_tqdm=True)):
+
+    pipe = StableDiffusionXLControlNetPipeline.from_pretrained(
+        "stabilityai/stable-diffusion-xl-base-1.0",
+        controlnet=controlnet,
+        vae=vae,
+        torch_dtype=torch.float16, 
+        variant="fp16",
+        use_safetensors=True
+    )
+    
+    pipe.to(device)
+    
+    prompt = prompt
+    negative_prompt = negative_prompt
+
+    if seed < 0 :
+        seed = random.randint(0, 423538377342)
+    
+    generator = torch.Generator(device=device).manual_seed(seed)
+
+    if image_in == None:
+        raise gr.Error("You forgot to upload a source image.")
+    
+    image_in = resize_image(image_in, "resized_input.jpg", 1024)
+    
+    if preprocessor == "canny":
+
+        image = load_image(image_in)
+
+        image = np.array(image)
+        image = cv2.Canny(image, 100, 200)
+        image = image[:, :, None]
+        image = np.concatenate([image, image, image], axis=2)
+        image = Image.fromarray(image)
+    
+    if use_custom_model:
+        
+        if model_name == "":
+            raise gr.Error("you forgot to set a custom model name.")
+        
+        custom_model = model_name
+
+        # This is where you load your trained weights
+        if weight_name == "NO SAFETENSORS FILE": 
+            pipe.load_lora_weights(
+                custom_model,     
+                low_cpu_mem_usage = True,
+                use_auth_token = True
+            )
+    
+        else:
+            pipe.load_lora_weights(
+                custom_model,
+                weight_name = weight_name,        
+                low_cpu_mem_usage = True,
+                use_auth_token = True
+            )
+    
+        lora_scale=custom_lora_weight
+
+        images = pipe(
+            prompt, 
+            negative_prompt=negative_prompt, 
+            image=image, 
+            controlnet_conditioning_scale=float(controlnet_conditioning_scale),
+            guidance_scale = float(guidance_scale),
+            num_inference_steps=inf_steps,
+            generator=generator,
+            cross_attention_kwargs={"scale": lora_scale}
+        ).images
+    else:
+        images = pipe(
+            prompt, 
+            negative_prompt=negative_prompt, 
+            image=image, 
+            controlnet_conditioning_scale=float(controlnet_conditioning_scale),
+            guidance_scale = float(guidance_scale),
+            num_inference_steps=inf_steps,
+            generator=generator,
+        ).images
+
+    images[0].save(f"result.png")
+
+    return f"result.png", seed
+
+css="""
+#col-container{
+    margin: 0 auto;
+    max-width: 720px;
+    text-align: left;
+}
+div#warning-duplicate {
+    background-color: #ebf5ff;
+    padding: 0 10px 5px;
+    margin: 20px 0;
+}
+div#warning-duplicate > .gr-prose > h2, div#warning-duplicate > .gr-prose > p {
+    color: #0f4592!important;
+}
+div#warning-duplicate strong {
+    color: #0f4592;
+}
+p.actions {
+    display: flex;
+    align-items: center;
+    margin: 20px 0;
+}
+div#warning-duplicate .actions a {
+    display: inline-block;
+    margin-right: 10px;
+}
+button#load_model_btn{
+    height: 46px;
+}
+#status_info{
+    font-size: 0.9em;
+}
+"""
+
+theme = gr.themes.Soft(
+    primary_hue="teal",
+    secondary_hue="gray",
+).set(
+    body_text_color_dark='*neutral_800',
+    background_fill_primary_dark='*neutral_50',
+    background_fill_secondary_dark='*neutral_50',
+    border_color_accent_dark='*primary_300',
+    border_color_primary_dark='*neutral_200',
+    color_accent_soft_dark='*neutral_50',
+    link_text_color_dark='*secondary_600',
+    link_text_color_active_dark='*secondary_600',
+    link_text_color_hover_dark='*secondary_700',
+    link_text_color_visited_dark='*secondary_500',
+    code_background_fill_dark='*neutral_100',
+    shadow_spread_dark='6px',
+    block_background_fill_dark='white',
+    block_label_background_fill_dark='*primary_100',
+    block_label_text_color_dark='*primary_500',
+    block_title_text_color_dark='*primary_500',
+    checkbox_background_color_dark='*background_fill_primary',
+    checkbox_background_color_selected_dark='*primary_600',
+    checkbox_border_color_dark='*neutral_100',
+    checkbox_border_color_focus_dark='*primary_500',
+    checkbox_border_color_hover_dark='*neutral_300',
+    checkbox_border_color_selected_dark='*primary_600',
+    checkbox_label_background_fill_selected_dark='*primary_500',
+    checkbox_label_text_color_selected_dark='white',
+    error_background_fill_dark='#fef2f2',
+    error_border_color_dark='#b91c1c',
+    error_text_color_dark='#b91c1c',
+    error_icon_color_dark='#b91c1c',
+    input_background_fill_dark='white',
+    input_background_fill_focus_dark='*secondary_500',
+    input_border_color_dark='*neutral_50',
+    input_border_color_focus_dark='*secondary_300',
+    input_placeholder_color_dark='*neutral_400',
+    slider_color_dark='*primary_500',
+    stat_background_fill_dark='*primary_300',
+    table_border_color_dark='*neutral_300',
+    table_even_background_fill_dark='white',
+    table_odd_background_fill_dark='*neutral_50',
+    button_primary_background_fill_dark='*primary_500',
+    button_primary_background_fill_hover_dark='*primary_400',
+    button_primary_border_color_dark='*primary_00',
+    button_secondary_background_fill_dark='whiite',
+    button_secondary_background_fill_hover_dark='*neutral_100',
+    button_secondary_border_color_dark='*neutral_200',
+    button_secondary_text_color_dark='*neutral_800'
+)
+  
+with gr.Blocks(theme=theme, css=css) as demo:
+    with gr.Column(elem_id="col-container"):
+        
+        gr.HTML("""
+<h2 style="text-align: center;">SD-XL Control LoRas</h2>
+<p style="text-align: center;">Use StableDiffusion XL with <a href="https://huggingface.co/collections/diffusers/sdxl-controlnets-64f9c35846f3f06f5abe351f">Diffusers' SDXL ControlNets</a></p>
+        """)
+
+        use_custom_model = gr.Checkbox(label="Use a custom pre-trained LoRa model ? (optional)", visible = False, value=False, info="To use a private model, you'll need to duplicate the space with your own access token.")
+        
+        with gr.Blocks(visible=False) as custom_model_box:
+            with gr.Row():
+                with gr.Column():
+                    if not is_shared_ui:
+                        your_username = api.whoami()["name"]
+                        my_models = api.list_models(author=your_username, filter=["diffusers", "stable-diffusion-xl", 'lora'])
+                        model_names = [item.modelId for item in my_models]
+    
+                    if not is_shared_ui:
+                        custom_model = gr.Dropdown(
+                            label = "Your custom model ID",
+                            info="You can pick one of your private models",
+                            choices = model_names,
+                            allow_custom_value = True
+                            #placeholder = "username/model_id"
+                        )
+                    else:
+                        custom_model = gr.Textbox(
+                            label="Your custom model ID", 
+                            placeholder="your_username/your_trained_model_name", 
+                            info="Make sure your model is set to PUBLIC"
+                        )
+                    
+                    weight_name = gr.Dropdown(
+                        label="Safetensors file", 
+                        #value="pytorch_lora_weights.safetensors", 
+                        info="specify which one if model has several .safetensors files",
+                        allow_custom_value=True,
+                        visible = False
+                    )
+                with gr.Column():
+                    with gr.Group():
+                        load_model_btn = gr.Button("Load my model", elem_id="load_model_btn")
+                        previous_model = gr.Textbox(
+                            visible = False
+                        )
+                        model_status = gr.Textbox(
+                            label = "model status",
+                            show_label = False,
+                            elem_id = "status_info"
+                        )
+                    trigger_word = gr.Textbox(label="Trigger word", interactive=False, visible=False)
+        
+        image_in = gr.Image(sources="upload", type="filepath")
+        
+        with gr.Row():
+            
+            with gr.Column():
+                with gr.Group():
+                    prompt = gr.Textbox(label="Prompt")
+                    negative_prompt = gr.Textbox(label="Negative prompt", value="extra digit, fewer digits, cropped, worst quality, low quality, glitch, deformed, mutated, ugly, disfigured")
+                with gr.Group():
+                    guidance_scale = gr.Slider(label="Guidance Scale", minimum=1.0, maximum=10.0, step=0.1, value=7.5)
+                    inf_steps = gr.Slider(label="Inference Steps", minimum="25", maximum="50", step=1, value=25)
+                    custom_lora_weight = gr.Slider(label="Custom model weights", minimum=0.1, maximum=0.9, step=0.1, value=0.9)
+
+            with gr.Column():
+                with gr.Group():
+                    preprocessor = gr.Dropdown(label="Preprocessor", choices=["canny"], value="canny", interactive=False, info="For the moment, only canny is available")  
+                    controlnet_conditioning_scale = gr.Slider(label="Controlnet conditioning Scale", minimum=0.1, maximum=0.9, step=0.01, value=0.5)
+                with gr.Group():
+                    seed = gr.Slider(
+                        label="Seed",
+                        info = "-1 denotes a random seed",
+                        minimum=-1,
+                        maximum=423538377342,
+                        step=1,
+                        value=-1
+                    )
+                    last_used_seed = gr.Number(
+                        label = "Last used seed",
+                        info = "the seed used in the last generation",
+                    )
+        
+        
+        submit_btn = gr.Button("Submit")
+        
+        result = gr.Image(label="Result")
+    
+    use_custom_model.change(
+        fn = check_use_custom_or_no,
+        inputs =[use_custom_model],
+        outputs = [custom_model_box],
+        queue = False
+    )
+    custom_model.blur(
+        fn=custom_model_changed,
+        inputs = [custom_model, previous_model],
+        outputs = [model_status],
+        queue = False
+    )
+    load_model_btn.click(
+        fn = load_model,
+        inputs=[custom_model],
+        outputs = [previous_model, model_status, weight_name, trigger_word],
+        queue = False
+    )
+    submit_btn.click(
+        fn = infer,
+        inputs = [use_custom_model,custom_model, weight_name, custom_lora_weight, image_in, prompt, negative_prompt, preprocessor, controlnet_conditioning_scale, guidance_scale, inf_steps, seed],
+        outputs = [result, last_used_seed]
+    )
+
+  # return demo 
+  
+
+demo.queue(max_size=12).launch(share=True)

viteGradio/dist/index.2cdaf7bc.css

@@ -0,0 +1,19 @@
+body {
+  margin: 0;
+  font-family: sans-serif;
+}
+
+.dropzone {
+  box-sizing: border-box;
+  z-index: 99999;
+  background: rgba(#60a7dc, .8);
+  border: 11px dashed #60a7dc;
+  width: 100%;
+  height: 100%;
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+}
+
+/*# sourceMappingURL=index.2cdaf7bc.css.map */

viteGradio/dist/index.2cdaf7bc.css.map

@@ -0,0 +1 @@
+{"mappings":"AAAA;;;;;AAIA","sources":["src/style.css"],"sourcesContent":["body {\r\n  font-family: sans-serif;\r\n  margin: 0;\r\n}\r\n.dropzone {\r\n\tbox-sizing: border-box;\r\n\tdisplay: none;\r\n\tposition: fixed;\r\n\twidth: 100%;\r\n    height: 100%;\r\n    left: 0;\r\n    top: 0;\r\n    z-index: 99999;\r\n\tbackground: rgba(#60a7dc,.8);\r\n\tborder: 11px dashed #60a7dc;\r\n}"],"names":[],"version":3,"file":"index.2cdaf7bc.css.map","sourceRoot":"/__parcel_source_root/"}

viteGradio/dist/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>depthmap-viewer-three</title>
+	<link rel="stylesheet" href="/index.2cdaf7bc.css">
+    <script src="/index.975ef6c8.js" defer=""></script>
+  </head>
+  <body>
+  <div id="dropzone" class="dropzone"></div>
+  </body>
+</html>

viteGradio/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+    <div id="dropzone" class="dropzone"></div>
+    <script
+      type="module"
+      src="https://gradio.s3-us-west-2.amazonaws.com/4.3.0/gradio.js"
+    ></script>
+   
+  </body>
+</html>

viteGradio/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "vitegradio",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
+    "three": "^0.158.0"
+  },
+  "devDependencies": {
+    "@gradio/client": "^0.8.0",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "eslint": "^8.45.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "vite": "^4.4.5"
+  }
+}

viteGradio/public/intro2.mp4

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ac96426c658432be6b256ad0e587317721f0cf633ac26611b65a8f8879e528de
+size 1002761

viteGradio/src/3Dviewer.jsx

@@ -0,0 +1,228 @@
+import * as THREE from 'three';
+import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
+
+import MyTexture from  "./assets/input.png";
+import MyDepth from  "./assets/image (2).png";
+
+import './App.css';
+ const renderer = new THREE.WebGLRenderer({ antialias: true });
+
+function Render3D(isVisible) {
+    let mesh;
+    let material;
+    let image_ar;
+    
+
+    const settings = {
+        metalness: 0.0,
+        roughness: 0.14,
+        ambientIntensity: 0.85,
+        displacementScale: 5, 
+        displacementBias: -0.5,
+        emissive: 0xffffff,
+    };
+
+    // init
+    const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000);
+    camera.position.z = 3.5;
+
+    const scene = new THREE.Scene();
+
+    const ambientLight = new THREE.AmbientLight( 0xffffff, 4 );
+    scene.add( ambientLight );
+
+    const pointLight = new THREE.PointLight( 0xff0000, 1 );
+    pointLight.position.z = 2500;
+    scene.add( pointLight );
+
+   
+    // const renderer = new THREE.WebGLRenderer( { antialias: true } );
+    renderer.setSize( window.innerWidth/1.3, window.innerHeight/1.5 );
+    renderer.setAnimationLoop( animation );
+    //renderer.xr.enabled = true;
+    renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    renderer.toneMappingExposure = 1;
+    renderer.outputColorSpace = THREE.SRGBColorSpace;
+    document.body.appendChild( renderer.domElement )
+    //console.log("isVisible ", isVisible)
+    
+
+    // animation
+    function animation( time ) {
+
+        //mesh.rotation.x = time / 2000;
+        //mesh.rotation.y = time / 1000;
+
+        renderer.render( scene, camera );
+
+    }
+
+    function onWindowResize() {
+
+        const aspect = window.innerWidth / window.innerHeight;
+        camera.aspect = aspect;
+        camera.updateProjectionMatrix();
+
+        renderer.setSize( window.innerWidth/1.3, window.innerHeight/1.5 );
+
+    }
+    window.addEventListener( 'resize', onWindowResize );
+
+
+    // orbit controls
+    const controls = new OrbitControls( camera, renderer.domElement );
+    controls.enableZoom = true;
+    controls.enableDamping = true;
+
+
+    const image = new Image();
+    const image2 = new Image();
+    (image.onload) = function() { 
+
+        if (mesh) {
+            mesh.geometry.dispose();
+            mesh.material.dispose();
+            scene.remove( mesh );
+        }
+        
+        image_ar = image.width / image.height ;
+        
+        const ctx = document.createElement('canvas').getContext('2d');
+        ctx.canvas.width = image.width;
+        ctx.canvas.height = image.height;
+        ctx.drawImage(image, 0, 0);
+        const myrgbmap = new THREE.CanvasTexture(ctx.canvas);
+
+        const ctx2 = document.createElement('canvas').getContext('2d');
+        ctx2.canvas.width = image2.width;
+        ctx2.canvas.height = image2.height;
+        ctx2.drawImage(image2, 0, 0);
+        const mydepthmap = new THREE.CanvasTexture(ctx2.canvas);
+
+        
+        // material
+        material = new THREE.MeshStandardMaterial( {
+
+            color: 0xaaaaaa,
+            roughness: settings.roughness,
+            metalness: settings.metalness,
+
+            map: myrgbmap,
+
+            displacementMap: mydepthmap,
+            displacementScale: settings.displacementScale,
+            displacementBias: settings.displacementBias,
+
+            emissive: image, // Add this line for emissive color
+            emissiveIntensity: 10,
+
+            side: THREE.DoubleSide
+
+        } );
+        
+        // generating geometry and add mesh to scene
+        const geometry = new THREE.PlaneGeometry( 10, 10, 512, 512 );
+        mesh = new THREE.Mesh( geometry, material );
+        mesh.scale.y = 1.0 / image_ar;
+        mesh.scale.multiplyScalar( 0.23 );
+        scene.add( mesh );
+        
+    }
+    image.src = MyTexture;
+    image2.src = MyDepth;
+
+
+    // // setup gui
+    // const gui = new GUI();
+    // gui.add( settings, 'metalness' ).min( 0 ).max( 1 ).onChange( function ( value ) {
+    //     material.metalness = value;
+    // } );
+    // gui.add( settings, 'roughness' ).min( 0 ).max( 1 ).onChange( function ( value ) {
+    //     material.roughness = value;
+    // } );
+    // gui.add( settings, 'ambientIntensity' ).min( 0 ).max( 1 ).onChange( function ( value ) {
+    //     ambientLight.intensity = value;
+    // } );
+    // gui.add( settings, 'displacementScale' ).min( 0 ).max( 30.0 ).onChange( function ( value ) {
+    //     material.displacementScale = value;
+    // } );
+    // gui.add( settings, 'displacementBias' ).min( -10 ).max( 10 ).onChange( function ( value ) {
+
+    //     material.displacementBias = value;
+    // } );
+
+
+    // setup drop zone
+    // var dropZone = document.getElementById('dropzone');
+
+    // function showDropZone() {
+    //     dropZone.style.display = "block";
+    // }
+    // function hideDropZone() {
+    //     dropZone.style.display = "none";
+    // }
+
+    // function allowDrag(e) {
+    //     if (true) {  // Test that the item being dragged is a valid one
+    //         e.dataTransfer.dropEffect = 'copy';
+    //         e.preventDefault();
+    //     }
+    // }
+
+    // function handleDrop(e) {
+    //     e.preventDefault();
+    //     hideDropZone();
+    //     const fileList = event.dataTransfer.files;
+    //     if (fileList.length > 0) {
+    //         readImage(fileList[0]);
+    //     }
+    // }
+
+    // function readImage(file) {
+    //     const reader = new FileReader();
+    //     reader.addEventListener('load', (event) => {
+    //         image.src = event.target.result;
+    //     });
+    //     reader.readAsDataURL(file);
+    // }
+
+    // window.addEventListener('dragenter', function(e) {
+    //     showDropZone();
+    // });
+    // dropZone.addEventListener('dragenter', allowDrag);
+    // dropZone.addEventListener('dragover', allowDrag);
+    // dropZone.addEventListener('dragleave', function(e) {
+    //     console.log('dragleave');
+    //     hideDropZone();
+    // });
+    // dropZone.addEventListener('drop', handleDrop);
+
+
+    // // listen for messages
+    // window.addEventListener('message', function(e) {
+    // if (e.data?.imagedata) {
+    //     image.src = e.data.imagedata;
+    // }
+    // });
+
+}
+
+function Viewer3D({ isVisible }) {
+    // console.log("called ")
+    renderer.clear();
+    renderer.setSize( 0, 0);
+  
+    return (
+      <>
+        {isVisible ? (
+            <div style={{ position: 'static', display: 'inline-block' }}>
+            <Render3D isVisible={isVisible} />
+            </div>
+        ) : null}
+      
+      </>
+    );
+  }
+  
+  export default Viewer3D;

viteGradio/src/App.css

@@ -0,0 +1,173 @@
+html
+#root {
+  /* max-width: 1280px;
+  margin: 0 auto; */
+  width: 100%;
+  /* padding: 2rem 2rem 2rem 2rem; */
+  text-align: center;
+  font-family: 'Montserrat', sans-serif;
+  color: #707070;
+  /* font-size: 1.3vw; */
+  --darkteal: #1fcfbb;
+  --teal:#99F6E4;
+  --lightteal: rgb(16, 16, 16);
+  --gray:#D1D5DB;
+  --lightgray: #E5E7EB;
+  position: absolute;
+  top:50px;
+  /* overflow-x: hidden; */
+}
+
+canvas {
+  position: absolute;
+  top: -10%;
+  left: 50%;
+  transform: translate(-50%, 50%);
+  /* visibility: hidden; */
+}
+
+.centered-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  top: 70%;
+  left: 50%;
+  transform: translate(-50%, 50%);
+  z-index: 100;
+  position: absolute;
+}
+
+.centered-container :hover {
+  background-color: var(--teal);
+  border-color: transparent;
+}
+
+.centered-container :focus :active {
+  border-color: transparent;
+}
+
+.centered-container button {
+  background-color: var(--darkteal);
+  outline: none; /* Remove outline on button */
+}
+
+.image-generator-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+
+.buttonContainer {
+  top:0;
+  position: relative;
+  display: flex;
+  gap: 5%;
+  padding-left: 60%;
+
+}
+
+.buttonGroup {
+  width: 100px;
+}
+
+.circularButton {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background-color: var(--darkteal);
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  /* padding: 0px; */
+  top:0;
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+}
+
+.buttonText {
+  margin-top: 20px;
+  top:0;
+  position: relative;
+}
+/* App.css */
+.visible {
+  display: block;
+}
+
+.hidden {
+  display: none;
+}
+
+
+.logo{
+  top:0;
+  position: absolute;
+  left:0;
+  padding: 0 2% 2% 2%;
+}
+
+.form-container {
+  margin-bottom: 20px;
+}
+
+label {
+  margin-right: 10px;
+}
+
+input {
+  margin-right: 10px;
+}
+
+.image-container img {
+  max-width: 100%;
+  height: auto;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  margin-top: 10px;
+}
+
+button {
+  position: relative;
+  padding: 5%;
+  background-color: #007bff;
+  border-radius: 5%;
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 50%);
+}
+
+
+
+
+.container {
+  max-width: 600px;
+  margin: auto;
+  padding: 20px;
+  text-align: center;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+label {
+  font-weight: bold;
+}
+
+.image-box {
+  margin-top: 20px;
+}
+
+img {
+  max-width: 100%;
+  height: auto;
+}

viteGradio/src/App.jsx

@@ -0,0 +1,44 @@
+// App.js
+import React, { useState } from 'react';
+import Header from './Header';
+import VisualisationPage from './VisualisationPage';
+import ReviewPage from './ReviewPage';
+import PromptPage from './PromptPage';
+import Viewer3D from './3Dviewer';
+import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
+
+
+// import GeneratePage from './components/GeneratePage';
+import './App.css';
+
+function App() {
+  const [currentPage, setCurrentPage] = useState('Visualisation');
+
+  const handleButtonClick = (page) => {
+    setCurrentPage(page);
+  };
+
+  return (
+    <>
+      <div>
+        <Header onPageButtonClick={handleButtonClick} style={{zIndex:'100'}}/>
+        <VisualisationPage onPageButtonClick={handleButtonClick} isVisible={currentPage === 'Visualisation'} />
+        <ReviewPage isVisible={currentPage === 'Review'} />
+        <PromptPage isVisible={currentPage === 'Prompt'} />
+        <Viewer3D isVisible={currentPage === 'Generate'} />
+       
+        <Router>
+        <div>
+         
+          <Routes>
+            <Route path="/generate" element={<Viewer3D/>} />
+          </Routes>
+        </div>
+      </Router>
+
+      </div>
+    </>
+  );
+}
+
+export default App;

viteGradio/src/Header.jsx

@@ -0,0 +1,41 @@
+// Header.js
+import React, { useState } from 'react';
+import './App.css';
+
+function Header({ onPageButtonClick }) {
+  return (
+    <>
+      <div>
+        <img src="./SUNS.png" className="logo" alt="SUNS" />
+        <div className="buttonContainer">
+          <div className="buttonGroup">
+            <button className="circularButton" onClick={() => onPageButtonClick('Visualisation')}>
+              1
+            </button>
+            <div className="buttonText">Visualisation</div>
+          </div>
+          <div className="buttonGroup">
+            <button className="circularButton" onClick={() => onPageButtonClick('Review')}>
+              2
+            </button>
+            <div className="buttonText">Review</div>
+          </div>
+          <div className="buttonGroup">
+            <button className="circularButton" onClick={() => onPageButtonClick('Prompt')}>
+              3
+            </button>
+            <div className="buttonText">Prompt</div>
+          </div>
+          <div className="buttonGroup">
+            <button className="circularButton" onClick={() => onPageButtonClick('Generate')}>
+              4
+            </button>
+            <div className="buttonText">Generate</div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default Header;

viteGradio/src/PromptPage.jsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import Test from './components/test';
+import ImageGenerationForm from './components/sdxl';
+import Original from './components/original';
+import Header from './Header';
+import './App.css';
+
+function PromptPage({ isVisible }) {
+  
+  return (
+    <>
+      <div className={isVisible ? 'visible' : 'hidden'}>
+        <gradio-app  eager="true" src="https://1a8762b6c23d88e4c3.gradio.live/" ></gradio-app>
+      </div>
+    </>
+  );
+}
+
+export default PromptPage;

viteGradio/src/ReviewPage.jsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import Test from './components/test';
+import ImageGenerationForm from './components/sdxl';
+import Original from './components/original';
+import Header from './Header';
+import './App.css';
+
+function ReviewPage({ isVisible }) {
+  
+  return (
+    <>
+      <div className={isVisible ? 'visible' : 'hidden'}>
+      <gradio-app src="https://claireozzz-sdxl-control-loras.hf.space"></gradio-app>
+      </div>
+    </>
+  );
+}
+
+export default ReviewPage;

viteGradio/src/VisualisationPage.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import './App.css';
+
+function VisualisationPage( props ) {
+  return (
+    <>
+      <div className={props.isVisible ? 'visible' : 'hidden'}>
+         <video width="95%" height="95%" autoPlay muted playsInline controls={false}>
+          <source src="./intro2.mp4" type="video/mp4" />
+          Your browser does not support the video tag.
+        </video>
+
+        <div className="centered-container">
+          <button 
+            onClick={() => props.onPageButtonClick('Review')}
+          >Begin</button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default VisualisationPage;

viteGradio/src/components/api.jsx

@@ -0,0 +1,3 @@
+const Api = "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";
+
+export default Api;

viteGradio/src/components/original.jsx

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+
+import Api from './api';
+
+const Original = () => {
+  const [loading, setLoading] = useState(false);
+  const [output, setOutput] = useState(null);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true);
+
+    const input = event.target.elements.input.value;
+    const response = await fetch(
+      "https://79c67b7467ac6c1889.gradio.live/",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Api}`,
+        },
+        body: JSON.stringify({ inputs: input,  }),
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error("Failed to generate image");
+    }
+
+    const blob = await response.blob();
+    setOutput(URL.createObjectURL(blob));
+    setLoading(false);
+  };
+
+  return (<div className="container al-c mt-3">
+    <h1>Stable <span>Diffusion</span></h1>
+    <p>Pellentesque vulputate dignissim enim, et sollicitudin massa pellentesque ut. Proin luctus dui ut sem varius eleifend.</p>
+    <form className="gen-form" onSubmit={handleSubmit}>
+      <input type="text" name="input" placeholder="type your prompt here..." />
+      <button type="submit">Generate</button>
+    </form>
+    <div>
+    {loading && <div className="loading">Loading...</div>}
+    {!loading && output && (
+      <div className="result-image">
+        <img src={output} alt="art"  />
+      </div>
+    )}
+    </div>
+
+    </div>);
+  
+};
+
+export default Original;

viteGradio/src/components/sdxl.jsx

@@ -0,0 +1,151 @@
+import React, { useState, useEffect } from "react";
+import Api from "./api";
+import { client } from "@gradio/client";
+
+const response_0 = await fetch("https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png");
+const exampleImage = await response_0.blob();
+
+const ImageGenerationForm = () => {
+  const [loading, setLoading] = useState(false);
+  const [output, setOutput] = useState(null);
+  const [modelss, setModels] = useState([]);
+  const [selectedModel, setSelectedModel] = useState("");
+
+  useEffect(() => {
+    // Fetch the available models from your API endpoint
+    
+    const fetchModels = async () => {
+      try {
+
+       
+        const app = await client("https://79c67b7467ac6c1889.gradio.live/", {
+            headers: {
+              Authorization: `Bearer ${Api}`,
+            },
+          });
+        const result = await app.predict("/load_model", [	
+                        'ClaireOzzz/allImages',	
+                        'ClaireOzzz/PorcelainModel', // string  in 'Your custom model ID' Dropdown component
+            ]);
+        // const response = await client("https://79c67b7467ac6c1889.gradio.live/", {
+        //   headers: {
+        //     Authorization: `Bearer ${Api}`,
+        //   },
+        // });
+
+        // if (!response.ok) {
+        //   throw new Error("Failed to fetch models");
+        // }
+
+        // // const modelsData = await response.json();
+        // const modelsData = await response.predict("/load_model", [		
+        //    ' ClaireOzzz/PorcelainModel', // string  in 'Your custom model ID' Dropdown component
+        // ]);
+
+        setModels(result);
+      } 
+      catch (error) {
+        console.error("Error fetching models:", error.message);
+      }
+    };
+
+    //fetchModels();
+  }, []);
+
+  const handleModelChange = (event) => {
+    setSelectedModel(event.target.value);
+  };
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true);
+
+    const input = event.target.elements.input.value;
+    const imageInput = event.target.elements.imageInput.files[0];
+    const negativePrompt = event.target.elements.negativePrompt.value;
+
+    const formData = new FormData();
+    formData.append("inputs", input);
+    formData.append("negative_prompt", negativePrompt);
+    formData.append("image", imageInput);
+    formData.append("selected_model", selectedModel);
+
+    try {
+        const app = await client("https://79c67b7467ac6c1889.gradio.live/");
+        const result = await app.predict("/infer", [		
+            'ClaireOzzz/PorcelainModel',
+            'null',
+            '0.1',
+           ' https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png',
+           "Hello!!",
+           "Hello!!",
+           'canny',
+           '0.1',
+           '1',
+           '25',
+            '-1',
+        ]);
+        console.log(result.data);
+    //   const response = await fetch(
+    //     "https://79c67b7467ac6c1889.gradio.live/",
+    //     {
+    //       method: "POST",
+    //       headers: {
+    //         Authorization: `Bearer ${Api}`,
+    //       },
+    //       body: formData,
+    //     }
+    //   );
+
+    //   if (!response.ok) {
+    //     throw new Error("Failed to generate image");
+    //   }
+
+    //   const blob = await response.blob();
+    //   setOutput(URL.createObjectURL(blob));
+    } 
+    catch (error) {
+      console.error("Error generating image:", error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="container al-c mt-3">
+      <h1>
+        Stable <span>Diffusion</span>
+      </h1>
+      <p>
+        Pellentesque vulputate dignissim enim, et sollicitudin massa
+        pellentesque ut. Proin luctus dui ut sem varius eleifend.
+      </p>
+      <form className="gen-form" onSubmit={handleSubmit}>
+        <div>
+          <label>Select Model:</label>
+          <select value={selectedModel} onChange={handleModelChange}>
+            {/* {modelss.map((model) => (
+              <option key={model} value={model}>
+                {model}
+              </option>
+            ))} */}
+          </select>
+        </div>
+        <input type="text" name="input" placeholder="type your prompt here..." />
+        <input type="file" name="imageInput" accept="image/*" />
+        <textarea name="negativePrompt" placeholder="type your negative prompt here..."></textarea>
+        <button type="submit">Generate</button>
+      </form>
+      {/* <div>
+        {loading && <div className="loading">Loading...</div>}
+        {!loading && output && (
+          <div className="result-image">
+            <img src={output} alt="art" />
+          </div>
+        )}
+      </div> */}
+    </div>
+  );
+};
+
+export default ImageGenerationForm;

viteGradio/src/components/test.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+
+import Api from './api';
+
+const Original = () => {
+  const [loading, setLoading] = useState(false);
+  const [output, setOutput] = useState(null);
+
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    setLoading(true);
+
+    const input = event.target.elements.input.value;
+    
+    const imageInput = event.target.elements.imageInput.files[0];
+    const negativePrompt = event.target.elements.negativePrompt.value;
+
+    const response = await fetch(
+      "https://79c67b7467ac6c1889.gradio.live/",
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Api}`,
+        },
+        body: JSON.stringify({ inputs: input, imageInput, negativePrompt }),
+      }
+    );
+    console.log('response', response);
+
+    if (!response.ok) {
+      throw new Error("Failed to generate image");
+    }
+
+    const blob = await response.blob();
+    setOutput(URL.createObjectURL(blob));
+    setLoading(false);
+  };
+
+  return (<div className="container al-c mt-3">
+    <h1>Stable <span>Diffusion</span></h1>
+    <p>Pellentesque vulputate dignissim enim, et sollicitudin massa pellentesque ut. Proin luctus dui ut sem varius eleifend.</p>
+    <form className="gen-form" onSubmit={handleSubmit}>
+      <input type="text" name="input" placeholder="type your prompt here..." />
+      <input type="file" name="imageInput" accept="image/*" />
+      <input type="text" name="negativePrompt" placeholder="type your negativity here..." />
+      <button type="submit">Generate</button>
+    </form>
+    <div>
+    {loading && <div className="loading">Loading...</div>}
+    {!loading && output && (
+      <div className="result-image">
+        <img src={output} alt="art"  />
+      </div>
+    )}
+    </div>
+
+    </div>);
+  
+};
+
+export default Original;

viteGradio/src/index.css

@@ -0,0 +1,58 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #F9FAFB;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: var(--teal);
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}

viteGradio/src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)

viteGradio/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})