Upload 55 files

.gitattributes

@@ -37,3 +37,10 @@ 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/images/result.png filter=lfs diff=lfs merge=lfs -text
+viteGradio/images/result1.png filter=lfs diff=lfs merge=lfs -text
+viteGradio/images/result2.png filter=lfs diff=lfs merge=lfs -text
+viteGradio/images/result3.png filter=lfs diff=lfs merge=lfs -text
+viteGradio/images/result4.png filter=lfs diff=lfs merge=lfs -text
+viteGradio/images/result5.png filter=lfs diff=lfs merge=lfs -text
+viteGradio/images/result6.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/another-page.html

@@ -0,0 +1,254 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<!-- <title>three.js webgl - multiple elements</title> -->
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="./src/App.css">
+		<style>
+			* {
+				box-sizing: border-box;
+				-moz-box-sizing: border-box;
+                
+                /* top: -10%;
+                left: 50%;
+                transform: translate(-50%, 50%); */
+			}
+
+			body {
+				background-color: #fff;
+				color: #444;
+			}
+
+			a {
+				color: #08f;
+			}
+
+			#content {
+				position: absolute;
+				top: 0; width: 100%;
+				z-index: 1;
+				padding: 3em 3rem 0 3rem ;
+			}
+
+			#c {
+				position: absolute;
+				left: 0;
+				width: 100%;
+				height: 100%;
+			}
+
+			.list-item {
+				display: inline-block;
+				margin: 1em;
+				padding: 1em;
+				box-shadow: 1px 2px 4px 0px rgba(0,0,0,0.25);
+			}
+
+			.list-item > div:nth-child(1) {
+				width: 350px;
+				height: 220px;
+			}
+
+			.list-item > div:nth-child(2) {
+				color: #888;
+				font-family: sans-serif;
+				font-size: large;
+				width: 200px;
+				margin-top: 0.5em;
+			}
+		</style>
+	</head>
+	<body>
+        
+		<canvas id="c"></canvas>
+		<div id="content">
+			<!-- <div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - multiple elements - webgl</div> -->
+		</div>
+
+		<script type="importmap">
+			{
+				"imports": {
+					"three": "../build/three.module.js",
+					"three/addons/": "./jsm/"
+				}
+			}
+		</script>
+
+		<script type="module">
+
+			import * as THREE from 'three';
+			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+		
+			let canvas, renderer;
+			const scenes = [];
+		
+			async function fetchImages() {
+				const response = await fetch('./images/names.json');
+				console.log(response)
+				const imageFiles = await response.json();
+		
+				const imagePairs = pairImages(imageFiles);
+				init(imagePairs);
+				animate();
+			}
+		
+			function pairImages(imageFiles) {
+				const resultImages = imageFiles.filter(file => file.startsWith('result'));
+				console.log(resultImages)
+				const imagePairs = [];
+		
+				resultImages.forEach(resultImage => {
+					const resultNumber = resultImage.match(/\d+/)[0];
+					const depthImage = `depth${resultNumber}.png`;
+		
+					if (imageFiles.includes(depthImage)) {
+						imagePairs.push({
+							map: `./images/${resultImage}`,
+							depthMap: `./images/${depthImage}`
+						});
+					}
+				});
+		
+				return imagePairs;
+			}
+		
+			function init(imagePairs) {
+		
+				canvas = document.getElementById( 'c' );
+				let amap = new THREE.TextureLoader().load("result.png")
+				let dmap = new THREE.TextureLoader().load("depth.png")
+				const settings = {
+					metalness: 0.0,
+					roughness: 1,
+					//ambientIntensity: 0,
+					displacementScale: 5, 
+					displacementBias: -0.5,
+				};
+		
+				const geometries = [
+					new THREE.PlaneGeometry( 10, 10, 512, 512 ),
+				];
+		
+				const content = document.getElementById( 'content' );
+				
+				for (let i = 0; i < imagePairs.length; i++) {
+					const scene = new THREE.Scene();
+		
+					// make a list item
+					const element = document.createElement( 'div' );
+					element.className = 'list-item';
+		
+					const sceneElement = document.createElement( 'div' );
+					element.appendChild( sceneElement );
+		
+					scene.userData.element = sceneElement;
+					content.appendChild( element );
+		
+					const camera = new THREE.PerspectiveCamera( 40, 1, 1, 10 );
+					camera.position.z = 12.5;
+					scene.userData.camera = camera;
+		
+					const controls = new OrbitControls( scene.userData.camera, scene.userData.element );
+					controls.minDistance = 2;
+					controls.maxDistance = 5;
+					controls.enablePan = false;
+					controls.enableZoom = false;
+					scene.userData.controls = controls;
+		
+					window.addEventListener("mousemove", onmousemove, false);
+					var plane = new THREE.Plane(new THREE.Vector3(1, 1, 0), 2); 
+					var raycaster = new THREE.Raycaster(); 
+					var mouse = new THREE.Vector2();       
+					var intersectPoint = new THREE.Vector3();
+		
+					function onmousemove(event) {
+						mouse.x = (event.clientX / window.innerWidth)  - 1;
+						mouse.y = -(event.clientY / window.innerHeight)- 1;
+						raycaster.setFromCamera(mouse, camera);
+						raycaster.ray.intersectPlane(plane, intersectPoint);
+						mesh.lookAt(intersectPoint);
+					}
+		
+					const geometry = geometries[ geometries.length * Math.random() | 0 ];
+				
+					const material = new THREE.MeshStandardMaterial( {
+						map: new THREE.TextureLoader().load(imagePairs[i].map),
+						displacementMap: new THREE.TextureLoader().load(imagePairs[i].depthMap),
+						emissive: 0xffffff,
+						emissiveIntensity: 0.9, 
+						emissiveMap :  new THREE.TextureLoader().load(imagePairs[i].map),
+						roughness: settings.roughness,
+						metalness: settings.metalness,
+						displacementScale: settings.displacementScale,
+						displacementBias: settings.displacementBias,
+						side: THREE.DoubleSide
+					} );
+		
+					const mesh = new THREE.Mesh( geometry, material );
+					mesh.scale.set(0.6,0.6,0.6)
+					mesh.frustrumCulled = false
+					mesh.position.set(0,0,3)
+					scene.add( mesh );
+					scenes.push( scene );
+				}
+		
+				renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
+				renderer.setClearColor( 0x000000, 0 );
+				renderer.setPixelRatio( window.devicePixelRatio );
+			}
+		
+			function updateSize() {
+				const width = canvas.clientWidth;
+				const height = canvas.clientHeight;
+		
+				if ( canvas.width !== width || canvas.height !== height ) {
+					renderer.setSize( width, height, false );
+				}
+			}
+		
+			function animate() {
+				render();
+				requestAnimationFrame( animate );
+			}
+		
+			function render() {
+				updateSize();
+		
+				canvas.style.transform = `translateY(${window.scrollY}px)`;
+		
+				renderer.setClearColor( 0xffffff );
+				renderer.setScissorTest( false );
+				renderer.clear();
+		
+				renderer.setClearColor( 0xe0e0e0 );
+				renderer.setScissorTest( true );
+		
+				scenes.forEach( function ( scene ) {
+					const element = scene.userData.element;
+					const rect = element.getBoundingClientRect();
+		
+					if ( rect.bottom < 0 || rect.top > renderer.domElement.clientHeight ||
+						 rect.right < 0 || rect.left > renderer.domElement.clientWidth ) {
+						return;
+					}
+		
+					const width = rect.right - rect.left;
+					const height = rect.bottom - rect.top;
+					const left = rect.left;
+					const bottom = renderer.domElement.clientHeight - rect.bottom;
+		
+					renderer.setViewport( left, bottom, width, height );
+					renderer.setScissor( left, bottom, width, height );
+		
+					const camera = scene.userData.camera;
+					renderer.render( scene, camera );
+				});
+			}
+		
+			fetchImages();
+		
+		</script>
+
+	</body>
+</html>

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/images/names.json

@@ -0,0 +1,15 @@
+[
+    "result1.png",
+    "depth1.png",
+    "result2.png",
+    "depth2.png",
+    "result3.png",
+    "depth3.png",
+    "result4.png",
+    "depth4.png",
+    "result5.png",
+    "depth5.png",
+    "result6.png",
+    "depth6.png"
+  ]
+  

viteGradio/index.html

@@ -0,0 +1,30 @@
+<!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>
+    <style>
+      /* Add a style block to set z-index for the link */
+      a {
+        position: fixed; /* Make the link fixed position */
+        top: 10px; /* Adjust the top position as needed */
+        left: 10px; /* Adjust the left position as needed */
+        z-index: 9999; /* Set a high z-index value */
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+    <!-- <a href="another-page.html">Go to Another Page</a> -->
+    <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,153 @@
+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  "./../images/result.png";
+import MyDepth from  "./../images/depth.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( 50, window.innerWidth / window.innerHeight, 1, 1000);
+    camera.position.z = 8.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 );
+    scene.background = new THREE.Color( 0xffffff );
+    // const renderer = new THREE.WebGLRenderer( { antialias: true } );
+    renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
+    renderer.setAnimationLoop( animation );
+    // renderer.toneMapping = THREE.ACESFilmicToneMapping;
+    // renderer.toneMappingExposure = 1;
+    // renderer.outputColorSpace = THREE.SRGBColorSpace;
+    document.body.appendChild( renderer.domElement )
+
+    // animation
+    window.addEventListener("mousemove", onmousemove, false);
+    var plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0.5); // it's up to you how you will create THREE.Plane(), there are several methods
+    var raycaster = new THREE.Raycaster(); //for reuse
+    var mouse = new THREE.Vector2();       //for reuse
+    var intersectPoint = new THREE.Vector3();//for reuse
+
+    function onmousemove(event) {
+    //get mouse coordinates
+        mouse.x = (event.clientX / window.innerWidth)  - 1;
+        mouse.y = -(event.clientY / window.innerHeight)- 1;
+        raycaster.setFromCamera(mouse, camera);//set raycaster
+        raycaster.ray.intersectPlane(plane, intersectPoint); // find the point of intersection
+        mesh.lookAt(intersectPoint); // face our arrow to this point
+    }
+
+    function animation( time ) {
+        renderer.render( scene, camera );
+    }
+
+    function onWindowResize() {
+
+        const aspect = window.innerWidth / window.innerHeight;
+        camera.aspect = aspect;
+        camera.updateProjectionMatrix();
+
+        renderer.setSize( window.innerWidth/2, window.innerHeight/2 );
+    }
+    window.addEventListener( 'resize', onWindowResize );
+
+
+    // orbit controls
+    // const controls = new OrbitControls( camera, renderer.domElement );
+    // controls.enableZoom = false;
+    // controls.enableDamping = false;
+
+
+    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,
+            map: myrgbmap,
+            displacementMap: mydepthmap,
+            emissive: 0xffffff,
+            emissiveIntensity: 0.9, 
+            emissiveMap :  myrgbmap,
+            roughness: settings.roughness,
+            metalness: settings.metalness,
+            displacementScale: settings.displacementScale,
+            displacementBias: settings.displacementBias,
+            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.5);
+        scene.add( mesh );
+        
+    }
+    image.src = MyTexture;
+    image2.src = MyDepth;
+}
+
+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}
+       {/* <iframe src="./../another-page.html" width="100%" height="1000px" frameborder="0"></iframe> */}
+      </>
+    );
+  }
+
+  export default Viewer3D;

viteGradio/src/App.css

@@ -0,0 +1,172 @@
+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%);
+} */
+
+.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,46 @@
+// 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 ThreeJSComponent from './multiple3D';
+
+// 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'}}/>
+        {/* <ThreeJSComponent/> */}
+        <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,35 @@
+import React, { useState, useEffect } 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 }) {
+  const handleButtonClick = () => {
+    // Calculate the scroll position to scroll to half the page
+    const halfPageScroll = window.innerHeight * 0.8;
+    //console.log(window.scroll)
+    // Scroll down to half the page
+    window.scrollTo({
+      top: 1000,
+      behavior: 'smooth', // Add smooth scrolling animation
+    });
+  };
+
+  
+
+  return (
+    <>
+      <div className={isVisible ? 'visible' : 'hidden'} style={{ overflow: 'auto', maxHeight: '1000px' }}>
+        {/* <gradio-app eager="true" src="https://48d319625c8a1616e3.gradio.live/"></gradio-app> */}
+        <button onClick={handleButtonClick}>Scroll to Half Page</button>
+        <h1>LOADING</h1>
+        <iframe src="./../another-page.html" width="100%" height="1000px" frameBorder="0"></iframe>
+      
+      </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;