popup 설정 설명 추가.

lee · lee · commit c7b7bc51266c · 2024-07-15T16:55:09.000+09:00
diff --git a/source/entryjs/api/2024-04-24-ml.md b/source/entryjs/api/2024-04-24-ml.md
@@ -213,6 +213,49 @@ entrylabs/ml은 사용자가 원하는 학습모을 선택하고 학습하는 
 사용자들이 인공지능 모델을 학습하는 UI를 팝업형태로 생성합니다.
 
 entry-tool을 활용한 팝업과 유사합니다.
+#### Vanilla JS
+```js
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+        <title>EntryJS Base Example</title>
+        <link rel="stylesheet" href="./test/ai/entry-ml.css" />
+    </head>
+    <body>
+        <button onClick={loadPopup()}>show</button>
+        <div id="popupContainer"></div>
+        <script type="text/javascript" src="./test/ai/entry-ml.js"></script>
+        <script>
+            learningPopup = new Entryml.Popup({
+                container: document.getElementById('popupContainer'),
+                isShow: false,
+                data: {
+                    tokenizerPath: '/test/ai/resources',
+                },
+            });
+            const loadPopup = () => {
+                learningPopup.show();  
+            }
+        </script>
+    </body>
+</html>
+```
+#### next.js
+[webpack externals](https://webpack.kr/configuration/externals/#externals). 설정을 이용하여 아래와 같이 사용 가능합니다. 
+
+webpack 설정.
+```js
+config.externals = [
+    {
+        '@entrylabs/tool': 'EntryTool',
+        '@entrylabs/tool/component': 'EntryTool.Component',
+        '@entrylabs/ml': 'Entryml',
+    },
+];
+```
 
 ```js
 const learningPopup = {};
