mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-18 10:44:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

update model3d

Browse Source
This commit is contained in:
dawoodkhan82 2022-03-21 03:14:07 -04:00
parent 41bd69ad44
commit 16ce49289a
5 changed files with 70 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
demo/model3d/run.py
View File

@ -3,22 +3,18 @@ import gradio as gr
def load_mesh(mesh_file_name):
file_dir = "demo/model3d/files"
file_dir = "model3d/files"
mesh_path = os.path.join(file_dir, mesh_file_name)
return mesh_path
return mesh_file_name
# inputs=[
# gr.inputs.Dropdown(["Duck.glb", "Bunny.obj", "Fox.gltf"], type="value", default="Duck.glb", label="Mesh File")
# ]
iface = gr.Interface(
load_mesh,
inputs=[
gr.inputs.Dropdown(["Duck.glb", "Bunny.obj", "Fox.gltf"], type="value", default="Duck.glb", label="Mesh File")
],
outputs=[
"model3d"
# to specify options use the object initializer
# gr.outputs.Model(clear_color=[1.0, 1.0, 1.0], label="3D Model")
]
inputs=["model3d"],
outputs=["model3d"]
)
if __name__ == "__main__":

4
ui/packages/app/src/components/directory.ts
View File

@ -11,6 +11,7 @@ import InputTextbox from "./input/Textbox/config.js";
import InputVideo from "./input/Video/config.js";
import InputDataFrame from "./input/DataFrame/config.js";
import InputTimeSeries from "./input/TimeSeries/config.js";
import InputModel3D from "./input/Model3D/config.js";
import OutputAudio from "./output/Audio/config.js";
import OutputCarousel from "./output/Carousel/config.js";
@ -43,7 +44,8 @@ export const input_component_map = {
slider: InputSlider,
textbox: InputTextbox,
timeseries: InputTimeSeries,
video: InputVideo
video: InputVideo,
model3d: InputModel3D
};
export const output_component_map = {

7
ui/packages/app/src/components/input/Model3D/Example.svelte Normal file
View File

@ -0,0 +1,7 @@
<script lang="ts">
export let value: string;
export let examples_dir: string;
</script>
<!-- svelte-ignore a11y-missing-attribute -->
<img class="input-model3d-example h-24 max-w-none" src={examples_dir + value} />

88
ui/packages/app/src/components/input/Model3D/Model3D.svelte
View File

@ -1,55 +1,55 @@
<script lang="ts">
import type { FileData } from "./types";
import Upload from "../../utils/Upload.svelte";
import ModifyUpload from "../../utils/ModifyUpload.svelte";
import { prettyBytes } from "../../utils/helpers";
import { _ } from "svelte-i18n";
// import type { FileData } from "./types";
// import Upload from "../../utils/Upload.svelte";
// import ModifyUpload from "../../utils/ModifyUpload.svelte";
// import { prettyBytes } from "../../utils/helpers";
// import { _ } from "svelte-i18n";
export let value: null | FileData | Array<FileData>;
export let setValue: (
val: Array<string | FileData> | string | FileData | null
) => Array<string | FileData> | string | FileData | null;
export let file_count: "single" | "multiple" | "directory";
export let theme: string;
export let static_src: string;
// export let value: null | FileData | Array<FileData>;
// export let setValue: (
// val: Array<string | FileData> | string | FileData | null
// ) => Array<string | FileData> | string | FileData | null;
// export let file_count: "single" | "multiple" | "directory";
// export let theme: string;
// export let static_src: string;
import { onMount, afterUpdate} from 'svelte';
import * as BABYLON from 'babylonjs';
import 'babylonjs-loaders'
// import { onMount, afterUpdate} from 'svelte';
// import * as BABYLON from 'babylonjs';
// import 'babylonjs-loaders'
let canvas: HTMLCanvasElement;
let scene: BABYLON.Scene;
// let canvas: HTMLCanvasElement;
// let scene: BABYLON.Scene;
afterUpdate(() => {
if (value != null) {
addNewModel();
}
});
// afterUpdate(() => {
// if (value != null) {
// addNewModel();
// }
// });
function addNewModel() {
const engine = new BABYLON.Engine(canvas, true);
scene = new BABYLON.Scene(engine);
scene.createDefaultCameraOrLight();
scene.clearColor = new BABYLON.Color4(0.2, 0.2, 0.2, 1);
engine.runRenderLoop(() => {
scene.render();
});
// function addNewModel() {
// const engine = new BABYLON.Engine(canvas, true);
// scene = new BABYLON.Scene(engine);
// scene.createDefaultCameraOrLight();
// scene.clearColor = new BABYLON.Color4(0.2, 0.2, 0.2, 1);
// engine.runRenderLoop(() => {
// scene.render();
// });
window.addEventListener('resize', () => {
engine.resize();
});
// window.addEventListener('resize', () => {
// engine.resize();
// });
let base64_model_content = value["data"];
let raw_content = BABYLON.Tools.DecodeBase64(base64_model_content);
let blob = new Blob([raw_content]);
let url = URL.createObjectURL(blob);
BABYLON.SceneLoader.Append("", url, scene, () => {
scene.createDefaultCamera(true, true, true);
}, undefined, undefined, "." + value["name"].split(".")[1]);
}
// let base64_model_content = value["data"];
// let raw_content = BABYLON.Tools.DecodeBase64(base64_model_content);
// let blob = new Blob([raw_content]);
// let url = URL.createObjectURL(blob);
// BABYLON.SceneLoader.Append("", url, scene, () => {
// scene.createDefaultCamera(true, true, true);
// }, undefined, undefined, "." + value["name"].split(".")[1]);
// }
</script>
{#if value === null}
test
<!-- {#if value === null}
<Upload load={setValue} {theme} {file_count}>
{$_("interface.drop_file")}
<br />- {$_("interface.or")} -<br />
@ -57,7 +57,7 @@
</Upload>
{:else}
<canvas class="w-full h-full object-fit" bind:this={canvas}></canvas>
{/if}
{/if} -->
<style lang="postcss">
</style>

9
ui/packages/app/src/components/input/Model3D/config.ts Normal file
View File

@ -0,0 +1,9 @@
import Component from "./Model3D.svelte";
import ExampleComponent from "./Example.svelte";
import { loadAsData } from "../../utils/example_processors";
export default {
component: Component,
example: ExampleComponent,
process_example: loadAsData
};