<div id="readability-page-1" class="page"><div id="post-body-8591469459673892030" itemprop="articleBody">
이 글은 Gradio HTML Javascript 렌더링 방법을 간략히 정리한다. 가끔, HTML, javascript(자바스크립트)를 Gradio 페이지에 표시하고 싶을 때가 있다. 예를 들어, Gradio 기존 컴포넌트에서 지원되지 않는 3D 그래픽을 렌더링해야 할 때가 있다.<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEg-YXpC40dJ9AMVwNnTLhuNFrS3lVUO7X1gistJHcGLsqAGcvTnFiCR9PQg4WhmQzVXWpnNBppmcGf6ZhJsLt8lzLhZQRjEOlZkgwkDgPENOACpH-wJGcT6Ol9-z7SQ-Bk7SMZoAtv0DkwKpc7bIx0AQOcvFmWA4sxXp8TFoF4Zkx8pkHWB0IvUXTPo-ty6"><img alt="" data-original-height="791" data-original-width="1544" height="143" src="https://blogger.googleusercontent.com/img/a/AVvXsEg-YXpC40dJ9AMVwNnTLhuNFrS3lVUO7X1gistJHcGLsqAGcvTnFiCR9PQg4WhmQzVXWpnNBppmcGf6ZhJsLt8lzLhZQRjEOlZkgwkDgPENOACpH-wJGcT6Ol9-z7SQ-Bk7SMZoAtv0DkwKpc7bIx0AQOcvFmWA4sxXp8TFoF4Zkx8pkHWB0IvUXTPo-ty6" width="280"></a>Gradio 3차원 모델 렌더링 예시 </div>하지만, Gradio는 HTML만 지원하고, javascript는 다양한 이유로 사용자가 직접 Gradio에서 실행하는 것을 허용하지 않는다. 이 경우, iframe 을 사용한다.<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjv7ANK-ThhlWLDaUUjocl9ny1J_CSUxYECy0ID_8Crq1EeEySW79glir9Mbl_SzOIv-z-1SR1RPl-R5HXVqfNYB2gDliNg3UuJ69a4WPizhmL_2JdCkTnKMbQVQ6zAoAsVMTMCF9Ercvvec_syIuCfUIlSwPdkf98-SR6EPVChjY9fdTDUcDtvE6AeC7rd"><img alt="" data-original-height="463" data-original-width="2244" height="57" src="https://blogger.googleusercontent.com/img/a/AVvXsEjv7ANK-ThhlWLDaUUjocl9ny1J_CSUxYECy0ID_8Crq1EeEySW79glir9Mbl_SzOIv-z-1SR1RPl-R5HXVqfNYB2gDliNg3UuJ69a4WPizhmL_2JdCkTnKMbQVQ6zAoAsVMTMCF9Ercvvec_syIuCfUIlSwPdkf98-SR6EPVChjY9fdTDUcDtvE6AeC7rd=w558-h115" width="280"></a>Gradio에서 three.js 코드 실행 예시 </div>다음은 Gradio에서 3D graphic 렌더링을 위해 three.js를 사용하는 예를 보여준다.<div>import os, json, requests, gradio as grfrom gradio import Interface, File, Files, Button, Label, Markdownclass 3D_viewer_component:&nbsp; &nbsp; def __init__(self, gr):&nbsp; &nbsp; &nbsp; &nbsp; self.html_code = """&lt;iframe srcdoc="&lt;!DOCTYPE html&gt;&lt;html&gt;&nbsp; &lt;head&gt;&nbsp; &nbsp; &lt;style&gt;&nbsp; &nbsp; &nbsp; body, html { margin: 0; overflow: hidden; height: 100%; }&nbsp; &nbsp; &nbsp; canvas { display: block; }&nbsp; &nbsp; &lt;/style&gt;&nbsp; &nbsp; &lt;script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'&gt;&lt;/script&gt;&nbsp; &lt;/head&gt;&nbsp; &lt;body&gt;&nbsp; &nbsp; &lt;script&gt;const WIDTH = window.innerWidth;const HEIGHT = window.innerHeight;const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(WIDTH, HEIGHT);renderer.setClearColor(0x111111, 1);document.body.appendChild(renderer.domElement);const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 0.1, 10000);camera.position.z = 30;camera.position.y = 10;scene.add(camera);const boxGeometry = new THREE.BoxGeometry(10, 10, 10);const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x0095dd });const cube = new THREE.Mesh(boxGeometry, basicMaterial);cube.position.x = -25;cube.rotation.set(0.4, 0.2, 0);scene.add(cube);const torusGeometry = new THREE.TorusGeometry(7, 1, 16, 32);const phongMaterial = new THREE.MeshPhongMaterial({ color: 0xff9500 });const torus = new THREE.Mesh(torusGeometry, phongMaterial);torus.rotation.set(0.5, 0.5, 0);scene.add(torus);const light = new THREE.PointLight(0xffffff);light.position.set(-10, 15, 50);scene.add(light);let t = 0;function render() {&nbsp; t += 0.01;&nbsp; requestAnimationFrame(render);&nbsp; cube.rotation.y += 0.01;&nbsp; torus.scale.y = Math.abs(Math.sin(t));&nbsp; renderer.render(scene, camera);}render();&nbsp; &nbsp; &lt;/script&gt;&nbsp; &lt;/body&gt;&lt;/html&gt;" width="100%" height="100%" style="border:none;"&gt;&lt;/iframe&gt;&nbsp; &nbsp; &nbsp; &nbsp; """&nbsp; &nbsp; &nbsp; &nbsp; self.component = gr.HTML(self.html_code)with gr.Blocks(title='3D viewer') as interface:	gr.Markdown("# 3D viewer")	with gr.Row(equal_height=True):interface.launch(share=True)</div>참고로, Gradio에서 공식적으로 추천하는 방법은 다음과 같이 커스텀 컴포넌트를 개발한 것이다.<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhi_ysMvzdmjPsD2Wqt2TDO_rTiWvolpncvQ_GHO960xapIiLBkJosFYaSeg2VJfMyN35iJFg84akDtBYSQUlTgx2Kn-1srtdTw8Xz5ML6mstwbVj-JD_s2RdkgF2ounZExW5_ynp3R6kNmFE7TheUUNUY_OfOZSlBSYqjt-0c5xSRygYUo2mgYMCnCUK2A"><img alt="" data-original-height="172" data-original-width="1102" height="43" src="https://blogger.googleusercontent.com/img/a/AVvXsEhi_ysMvzdmjPsD2Wqt2TDO_rTiWvolpncvQ_GHO960xapIiLBkJosFYaSeg2VJfMyN35iJFg84akDtBYSQUlTgx2Kn-1srtdTw8Xz5ML6mstwbVj-JD_s2RdkgF2ounZExW5_ynp3R6kNmFE7TheUUNUY_OfOZSlBSYqjt-0c5xSRygYUo2mgYMCnCUK2A=w519-h81" width="280"></a>커스텀 컴포넌트 생성 명령 예시명령 실행 순서(일부)위 그림과 같이 컴포넌트 생성하면, 다음처럼 프로젝트 파일이 생성되고, 이를 수정해 개발하는 방식이다.</div><blockquote><div>- backend/ &lt;- The python code for your custom component</div><div>- frontend/ &lt;- The javascript code for your custom component</div><div>- demo/&nbsp; &nbsp; &nbsp;&lt;- A sample app using your component. Modify this!</div><div>- pyproject.toml &lt;- Used to build the package and specify package metadata.</div></blockquote><div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhlnaZcmecqoyb8DR_hgSqhk6srYyQi9eRWf6afMpGfDz2-myfdkkMNFDrB2oApHSaSDjr6q8GKnmWiZAUm2KtAliuxqsQyvfI3kkbLBLAR2c-IGxHE5lZ6Fo-yzvrnJDdVoVvLp_d_RIYZoM_uZ8p4jitgN5ii-JjbO2ZWSXlgDUjKZwyakIailJBh5eIE"><img alt="" data-original-height="1287" data-original-width="2360" height="153" src="https://blogger.googleusercontent.com/img/a/AVvXsEhlnaZcmecqoyb8DR_hgSqhk6srYyQi9eRWf6afMpGfDz2-myfdkkMNFDrB2oApHSaSDjr6q8GKnmWiZAUm2KtAliuxqsQyvfI3kkbLBLAR2c-IGxHE5lZ6Fo-yzvrnJDdVoVvLp_d_RIYZoM_uZ8p4jitgN5ii-JjbO2ZWSXlgDUjKZwyakIailJBh5eIE=w483-h265" width="280"></a></div>이외 3차원 모델 파일 뷰어는 Model3D 컴포넌트를 사용할 수도 있다.<div><a href="https://blogger.googleusercontent.com/img/a/AVvXsEjJnTozU6pSfXI8M8Nn7P3mXY-j8VKYF-UJFX4eDysGhimDzomy95CGxewzI-HTzmDVHtGWoaRtF6AZwEqWn59U1EoxvDJF8Uv42jVg7cgbrnYsFu7ZqeL3z2xBaFRi4doyBUmb8NYrBwQtRvI1gSSY8uQl4T98u1qMHFDadCJRlsNSNskoA1wvhaF1p6tR"><img alt="" data-original-height="577" data-original-width="935" height="172" src="https://blogger.googleusercontent.com/img/a/AVvXsEjJnTozU6pSfXI8M8Nn7P3mXY-j8VKYF-UJFX4eDysGhimDzomy95CGxewzI-HTzmDVHtGWoaRtF6AZwEqWn59U1EoxvDJF8Uv42jVg7cgbrnYsFu7ZqeL3z2xBaFRi4doyBUmb8NYrBwQtRvI1gSSY8uQl4T98u1qMHFDadCJRlsNSNskoA1wvhaF1p6tR" width="280"></a>Model3D 예시 </div>레퍼런스<div><ul><li><a href="https://www.gradio.app/docs/gradio/model3d">Gradio Model3D Docs</a></li><li><a href="https://www.gradio.app/guides/custom-components-in-five-minutes">Custom Components In Five Minutes</a></li><li><a href="https://www.gradio.app/custom-components/gallery">Gradio Custom Components Gallery</a></li><li><a href="https://huggingface.co/spaces/gradio/model3D/tree/main">gradio/model3D</a></li></ul></div>

</div></div>

Daddy Makers

이 글은 Gradio HTML Javascript 렌더링 방법을 간략히 정리한다. 가끔, HTML, javascript(자바스크립트)를 Gradio 페이지에 표시하고 싶을 때가 있다. 예를 들어, Gradio 기존 컴포넌트에서 지원되지 않는 3D 그래픽을 렌더링해야 할 때가 있다.
Gradio 3차원 모델 렌더링 예시
하지만, Gradio는 HTML만 지원하고, javascript는 다양한 이유로 사용자가 직접 Gradio에서 실행하는 것을 허용하지 않는다. 이 경우, iframe 을 사용한다.
Gradio에서 three.js 코드 실행 예시
다음은 Gradio에서 3D graphic 렌더링을 위해 three.js를 사용하는 예를 보여준다.
import os, json, requests, gradio as gr
from gradio import Interface, File, Files, Button, Label, Markdown
class 3D_viewer_component:
    def __init__(self, gr):
        self.html_code = """
<iframe srcdoc="
<!DOCTYPE html>
<html>
  <head>
    <style>
      body, html { margin: 0; overflow: hidden; height: 100%; }
      canvas { display: block; }
    </style>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'></script>
  </head>
  <body>
    <script>
const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(WIDTH, HEIGHT);
renderer.setClearColor(0x111111, 1);
document.body.appendChild(renderer.domElement);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 0.1, 10000);
camera.position.z = 30;
camera.position.y = 10;
scene.add(camera);
const boxGeometry = new THREE.BoxGeometry(10, 10, 10);
const basicMaterial = new THREE.MeshBasicMaterial({ color: 0x0095dd });
const cube = new THREE.Mesh(boxGeometry, basicMaterial);
cube.position.x = -25;
cube.rotation.set(0.4, 0.2, 0);
scene.add(cube);
const torusGeometry = new THREE.TorusGeometry(7, 1, 16, 32);
const phongMaterial = new THREE.MeshPhongMaterial({ color: 0xff9500 });
const torus = new THREE.Mesh(torusGeometry, phongMaterial);
torus.rotation.set(0.5, 0.5, 0);
scene.add(torus);
const light = new THREE.PointLight(0xffffff);
light.position.set(-10, 15, 50);
scene.add(light);
let t = 0;
function render() {
  t += 0.01;
  requestAnimationFrame(render);
  cube.rotation.y += 0.01;
  torus.scale.y = Math.abs(Math.sin(t));
  renderer.render(scene, camera);
}
render();
    </script>
  </body>
</html>
" width="100%" height="100%" style="border:none;"></iframe>
        """
        self.component = gr.HTML(self.html_code)
with gr.Blocks(title='3D viewer') as interface:
	gr.Markdown("# 3D viewer")
	with gr.Row(equal_height=True):
		3D_viewer_component(gr)
		3D_viewer_component(gr)
interface.launch(share=True)
참고로, Gradio에서 공식적으로 추천하는 방법은 다음과 같이 커스텀 컴포넌트를 개발한 것이다.
커스텀 컴포넌트 생성 명령 예시
명령 실행 순서(일부)
위 그림과 같이 컴포넌트 생성하면, 다음처럼 프로젝트 파일이 생성되고, 이를 수정해 개발하는 방식이다.
- backend/ <- The python code for your custom component
- frontend/ <- The javascript code for your custom component
- demo/     <- A sample app using your component. Modify this!
- pyproject.toml <- Used to build the package and specify package metadata.
Gradio 커스텀 컴포넌트 예시(Gradio Custom Components Gallery)
이외 3차원 모델 파일 뷰어는 Model3D 컴포넌트를 사용할 수도 있다.
Model3D 예시
레퍼런스
Gradio Model3D Docs
Custom Components In Five Minutes
Gradio Custom Components Gallery
gradio/model3D

Gradio HTML Javascript 렌더링 방법

댓글