Delete viteGradio

viteGradio/.eslintrc.cjs

@@ -1,20 +0,0 @@
-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

@@ -1,24 +0,0 @@
-# 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

@@ -1,397 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,12 +0,0 @@
-<!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

@@ -1,19 +0,0 @@
-<!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

@@ -1,29 +0,0 @@
-{
-  "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

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

viteGradio/src/3Dviewer.jsx

@@ -1,228 +0,0 @@
-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

@@ -1,173 +0,0 @@
-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

@@ -1,44 +0,0 @@
-// 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

@@ -1,41 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

viteGradio/src/components/original.jsx

@@ -1,55 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,58 +0,0 @@
-: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

@@ -1,10 +0,0 @@
-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

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