Hugging Face's logo

toto10
/
extensions

Model card Files Community
7
extensions
File size: 3,517 Bytes 
ea35075
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
 
import React from 'react';
import {useState, useCallback} from 'react';
import ReactDOM from 'react-dom/client';
import {Container, Grid} from '@mui/material';
import ThreeJsScene from './ThreeJsScene';
import {
    convertThreeJsObjects,
    setBgColor,
    setPlaying,
    setStopPlaying,
    controlAnimationProgress,
    setRendererImage,
    setFar,
    setFOV,
    setNear,
    refreshSceneTree,
    handleSelectedObject,
    setVisible,
    handlePoseSelectedObject,
    removeObject,
    loadPoseModel,
    setPreviewSize
} from './ThreeJsScene';
import ScenePanel from './ScenePanel'
import AnimationPanel from './AnimationPanel'
import SendToControlNetPanel from './SendToControlNetPanel'
import ModelPanel from './ModelPanel'
import PosePanel from './PosePanel'

let _sendImage;

export default function App({controlNetNum}) {
    const [uploadedModelFile, setUploadedModelFile] = useState(null);

    const generateControlNetOptions = () => {
        const options = [];
        for (let i = 0; i < controlNetNum; i++) {
            const option = {value: i.toString(), label: i.toString()};

            options.push(option);
        }

        return options;
    }

    const options = generateControlNetOptions();

    const handleValueChange = (value) => {
        console.log('Selected value:', value);
    };

    return (
        <>
            <Container maxWidth="none">
                <Grid container spacing={3}>
                    <Grid item xs={10} style={{height: '80vh'}}>

                        <ThreeJsScene
                            uploadedModelFile={uploadedModelFile}
                        />
                    </Grid>
                    <Grid item xs={2}>
                        <PosePanel handlePoseSelectedObject={handlePoseSelectedObject}
                                   setPoseModelFileName={loadPoseModel}/>
                        <ModelPanel setUploadedModelFile={setUploadedModelFile}/>

                        <ScenePanel refreshSceneTree={refreshSceneTree} handleSelectedObject={handleSelectedObject}
                                    setVisible={setVisible}
                                    setCameraNear={setNear} setCameraFar={setFar} setCameraFOV={setFOV}
                                    setCanvasBgColor={setBgColor} removeObject={removeObject}/>

                        <AnimationPanel setAnimationPlaying={setPlaying} setAnimationStopPlaying={setStopPlaying}
                                        controlAnimation={controlAnimationProgress}/>

                        <SendToControlNetPanel options={options} onValueChange={handleValueChange}
                                               setRendererImage={setRendererImage}
                                               sendImage={_sendImage} setPreviewSize={setPreviewSize}/>
                    </Grid>
                </Grid>
            </Container>
        </>
    );
}

export function create3dmodelLoaderApp({container, controlNetNum}) {
    const root = ReactDOM.createRoot(container);

    root.render(<App controlNetNum={controlNetNum}/>);
}

function localDev() {
    const root = ReactDOM.createRoot(document.getElementById('sd-3d-model-loader-container'));

    root.render(<App controlNetNum={3}/>);
}

export function setSendImageFunc3dmodel(sendImage) {
    _sendImage = sendImage;
}

window.create3dmodelLoaderApp = create3dmodelLoaderApp;
window.setSendImageFunc3dmodel = setSendImageFunc3dmodel;

// enable this method for local dev, and run npm start
//localDev();