@mindexec/cli 0.2.0

package/wwwroot/_content/MindExecution.Shared/js/renderers/CSS3DRenderer.js

@@ -0,0 +1,50 @@
+// Minimal CSS3DRenderer setup adapted for direct script include (non-module)
+(function(){
+    if (window.CSS3DRenderer) return;
+
+    function epsilon(value){return Math.abs(value) < 1e-10 ? 0 : value;}
+
+    class CSS3DObject extends THREE.Object3D {
+        constructor(element){
+            super();
+            this.element = element || document.createElement('div');
+            this.element.style.position = 'absolute';
+            this.element.style.pointerEvents = 'auto';
+            // Flags used by renderer checks
+            this.isCSS3DObject = true;
+
+            this.addEventListener('removed', function(){
+                this.traverse(function(object){
+                    if (object.element instanceof Element && object.element.parentNode !== null){
+                        object.element.parentNode.removeChild(object.element);
+                    }
+                });
+            });
+        }
+    }
+
+    class CSS3DSprite extends CSS3DObject {
+        constructor(element){
+            super(element);
+            this.isCSS3DSprite = true;
+        }
+    }
+
+    function CSS3DRenderer(){
+        var _width, _height; var _widthHalf, _heightHalf; var cache = { camera:{ fov:0, style:'' }, objects: new WeakMap() };
+        var domElement = document.createElement('div'); domElement.style.overflow = 'hidden'; this.domElement = domElement;
+        var cameraElement = document.createElement('div'); cameraElement.style.webkitTransformStyle = cameraElement.style.transformStyle = 'preserve-3d'; cameraElement.style.pointerEvents = 'none'; domElement.appendChild(cameraElement);
+
+        this.getSize = function(){ return { width:_width, height:_height }; };
+        this.getCameraElement = function(){ return cameraElement; };
+        this.setSize = function(width, height){ _width=width; _height=height; _widthHalf=_width/2; _heightHalf=_height/2; domElement.style.width=width+'px'; domElement.style.height=height+'px'; cameraElement.style.width=width+'px'; cameraElement.style.height=height+'px'; };
+        function getCameraCSSMatrix(matrix){ var e=matrix.elements; return 'matrix3d('+epsilon(e[0])+','+epsilon(-e[1])+','+epsilon(e[2])+','+epsilon(e[3])+','+epsilon(e[4])+','+epsilon(-e[5])+','+epsilon(e[6])+','+epsilon(e[7])+','+epsilon(e[8])+','+epsilon(-e[9])+','+epsilon(e[10])+','+epsilon(e[11])+','+epsilon(e[12])+','+epsilon(-e[13])+','+epsilon(e[14])+','+epsilon(e[15])+')'; }
+        function getObjectCSSMatrix(matrix){ var e=matrix.elements; var m='matrix3d('+epsilon(e[0])+','+epsilon(e[1])+','+epsilon(e[2])+','+epsilon(e[3])+','+epsilon(-e[4])+','+epsilon(-e[5])+','+epsilon(-e[6])+','+epsilon(-e[7])+','+epsilon(e[8])+','+epsilon(e[9])+','+epsilon(e[10])+','+epsilon(e[11])+','+epsilon(e[12])+','+epsilon(e[13])+','+epsilon(e[14])+','+epsilon(e[15])+')'; return m; }
+        function renderObject(object, scene, camera, cameraCSSMatrix){ if (object.isCSS3DObject){ var style=getObjectCSSMatrix(object.matrixWorld); var element=object.element; var cached=cache.objects.get(object); if (cached===undefined || cached.style!==style){ element.style.webkitTransform=element.style.transform=style; cache.objects.set(object, { style }); } element.style.display = object.visible ? '' : 'none'; if (element.parentNode !== cameraElement){ cameraElement.appendChild(element); } } for (var i=0,l=object.children.length;i<l;i++){ renderObject(object.children[i], scene, camera, cameraCSSMatrix); } }
+        function renderCameraOnly(renderer, camera){ var fov=camera.projectionMatrix.elements[5]*_heightHalf; if (cache.camera.fov!==fov){ renderer.domElement.style.webkitPerspective=renderer.domElement.style.perspective=fov+'px'; cache.camera.fov=fov; } if (camera.parent===null) camera.updateMatrixWorld(); var cameraCSSMatrix='translateZ('+fov+'px)'+getCameraCSSMatrix(camera.matrixWorldInverse); var style=cameraCSSMatrix+'translate('+_widthHalf+'px,'+_heightHalf+'px)'; if (cache.camera.style!==style){ cameraElement.style.webkitTransform=cameraElement.style.transform=style; cache.camera.style=style; } return cameraCSSMatrix; }
+        this.renderCamera = function(camera){ renderCameraOnly(this, camera); };
+        this.render = function(scene, camera){ if (scene.autoUpdate===true) scene.updateMatrixWorld(); var cameraCSSMatrix=renderCameraOnly(this, camera); renderObject(scene, scene, camera, cameraCSSMatrix); };
+    }
+
+    window.CSS3DObject = CSS3DObject; window.CSS3DSprite = CSS3DSprite; window.CSS3DRenderer = CSS3DRenderer;
+})();

package/wwwroot/_content/MindExecution.Shared/js/texture-worker-manager.js

@@ -0,0 +1,188 @@
+// texture-worker-manager.js
+// [NEW] Worker 풀 관리 + 텍스처 생성 API
+(function () {
+    'use strict';
+
+    const WORKER_COUNT = 2; // Worker 수 (CPU 코어에 따라 조절)
+    const workers = [];
+    const pendingRequests = new Map();
+    let nextRequestId = 0;
+    let currentWorkerIndex = 0;
+    let isInitialized = false;
+
+    /**
+     * Worker 풀 초기화
+     */
+    function init() {
+        if (isInitialized) return Promise.resolve();
+
+        // OffscreenCanvas 지원 확인
+        if (typeof OffscreenCanvas === 'undefined') {
+            console.warn('[TextureWorker] OffscreenCanvas not supported, using fallback');
+            return Promise.resolve();
+        }
+
+        return new Promise((resolve) => {
+            let readyCount = 0;
+
+            for (let i = 0; i < WORKER_COUNT; i++) {
+                try {
+                    const worker = new Worker('_content/MindExecution.Shared/js/texture-worker.js');
+
+                    worker.onmessage = (e) => {
+                        const { type, requestId, bitmap, error } = e.data;
+
+                        if (type === 'ready') {
+                            readyCount++;
+                            console.log(`[TextureWorker] Worker ${i} ready (${readyCount}/${WORKER_COUNT})`);
+                            if (readyCount === WORKER_COUNT) {
+                                isInitialized = true;
+                                console.log('[TextureWorker] All workers ready');
+                                resolve();
+                            }
+                            return;
+                        }
+
+                        const pending = pendingRequests.get(requestId);
+                        if (!pending) return;
+
+                        pendingRequests.delete(requestId);
+
+                        if (type === 'error') {
+                            pending.reject(new Error(error));
+                        } else if (type === 'textureReady') {
+                            pending.resolve(bitmap);
+                        }
+                    };
+
+                    worker.onerror = (e) => {
+                        console.error(`[TextureWorker] Worker ${i} error:`, e);
+                    };
+
+                    workers.push(worker);
+                } catch (e) {
+                    console.error(`[TextureWorker] Failed to create worker ${i}:`, e);
+                }
+            }
+
+            // 타임아웃 (5초 후 강제 resolve)
+            setTimeout(() => {
+                if (!isInitialized) {
+                    console.warn('[TextureWorker] Init timeout, some workers may not be ready');
+                    isInitialized = workers.length > 0;
+                    resolve();
+                }
+            }, 5000);
+        });
+    }
+
+    /**
+     * Worker 지원 여부
+     */
+    function isSupported() {
+        return typeof OffscreenCanvas !== 'undefined' && workers.length > 0;
+    }
+
+    /**
+     * Worker를 사용해 텍스처 생성 요청
+     * @returns {Promise<ImageBitmap>}
+     */
+    async function renderTexture(nodeData, width, height, qualityScale = 1.0) {
+        if (!isInitialized) {
+            await init();
+        }
+
+        return new Promise((resolve, reject) => {
+            if (!isSupported()) {
+                reject(new Error('Worker not supported'));
+                return;
+            }
+
+            const requestId = nextRequestId++;
+            const worker = workers[currentWorkerIndex];
+            currentWorkerIndex = (currentWorkerIndex + 1) % workers.length;
+
+            pendingRequests.set(requestId, { resolve, reject });
+
+            // 5초 타임아웃
+            const timeout = setTimeout(() => {
+                if (pendingRequests.has(requestId)) {
+                    pendingRequests.delete(requestId);
+                    reject(new Error('Worker timeout'));
+                }
+            }, 5000);
+
+            // 원래 resolve/reject에 타임아웃 클리어 추가
+            const originalResolve = resolve;
+            const originalReject = reject;
+
+            pendingRequests.set(requestId, {
+                resolve: (result) => {
+                    clearTimeout(timeout);
+                    originalResolve(result);
+                },
+                reject: (error) => {
+                    clearTimeout(timeout);
+                    originalReject(error);
+                }
+            });
+
+            // Worker에 요청 전송
+            worker.postMessage({
+                type: 'renderTexture',
+                requestId: requestId,
+                nodeData: {
+                    id: nodeData.id,
+                    contentType: nodeData.contentType,
+                    response: nodeData.response,
+                    prompt: nodeData.prompt
+                },
+                width: Math.round(width),
+                height: Math.round(height),
+                qualityScale: qualityScale
+            });
+        });
+    }
+
+    /**
+     * ImageBitmap을 THREE.CanvasTexture로 변환
+     */
+    function bitmapToTexture(bitmap, THREE) {
+        // ImageBitmap을 Canvas에 그리기
+        const canvas = document.createElement('canvas');
+        canvas.width = bitmap.width;
+        canvas.height = bitmap.height;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(bitmap, 0, 0);
+        bitmap.close(); // 메모리 해제
+
+        // THREE.CanvasTexture 생성
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.colorSpace = THREE.SRGBColorSpace;
+        texture.generateMipmaps = true;
+        texture.minFilter = THREE.LinearMipmapLinearFilter;
+        texture.magFilter = THREE.LinearFilter;
+
+        return texture;
+    }
+
+    /**
+     * Worker 종료
+     */
+    function terminate() {
+        workers.forEach(w => w.terminate());
+        workers.length = 0;
+        pendingRequests.clear();
+        isInitialized = false;
+    }
+
+    // 전역 노출
+    window.TextureWorkerManager = {
+        init,
+        isSupported,
+        renderTexture,
+        bitmapToTexture,
+        terminate
+    };
+
+})();

package/wwwroot/_content/MindExecution.Shared/js/texture-worker.js

@@ -0,0 +1,208 @@
+// texture-worker.js
+// [NEW] Web Worker for off-thread texture rendering
+// 메인 스레드 블로킹 없이 텍스처 생성
+
+// Worker 내에서 marked.js 로드
+importScripts('marked.min.js');
+
+// marked 설정
+if (typeof marked !== 'undefined') {
+    marked.setOptions({
+        breaks: true,
+        gfm: true
+    });
+}
+
+/**
+ * 마크다운을 플레인 텍스트로 변환 (간단 버전)
+ */
+function markdownToPlainText(markdown) {
+    if (!markdown) return '';
+
+    // HTML로 변환 후 태그 제거
+    let html = '';
+    try {
+        html = marked.parse(markdown);
+    } catch {
+        return markdown;
+    }
+
+    // HTML 태그 제거
+    let text = html
+        .replace(/<br\s*\/?>/gi, '\n')
+        .replace(/<\/p>/gi, '\n\n')
+        .replace(/<\/li>/gi, '\n')
+        .replace(/<[^>]+>/g, '')
+        .replace(/&nbsp;/g, ' ')
+        .replace(/&amp;/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'")
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+
+    return text;
+}
+
+/**
+ * 텍스트를 줄 단위로 분할 (word wrap)
+ */
+function wrapText(ctx, text, maxWidth) {
+    const lines = [];
+    const paragraphs = text.split('\n');
+
+    for (const paragraph of paragraphs) {
+        if (paragraph.trim() === '') {
+            lines.push('');
+            continue;
+        }
+
+        const words = paragraph.split(' ');
+        let currentLine = '';
+
+        for (const word of words) {
+            const testLine = currentLine ? `${currentLine} ${word}` : word;
+            const metrics = ctx.measureText(testLine);
+
+            if (metrics.width > maxWidth && currentLine) {
+                lines.push(currentLine);
+                currentLine = word;
+            } else {
+                currentLine = testLine;
+            }
+        }
+
+        if (currentLine) {
+            lines.push(currentLine);
+        }
+    }
+
+    return lines;
+}
+
+/**
+ * 노드 배경 그리기
+ */
+function drawBackground(ctx, width, height, isSelected) {
+    const radius = 20;
+    const borderWidth = isSelected ? 4 : 2;
+    const borderColor = isSelected ? '#2563eb' : '#d1d5db';
+    const bgColor = '#ffffff';
+
+    // 배경
+    ctx.fillStyle = bgColor;
+    ctx.beginPath();
+    ctx.roundRect(borderWidth, borderWidth, width - borderWidth * 2, height - borderWidth * 2, radius);
+    ctx.fill();
+
+    // 테두리
+    ctx.strokeStyle = borderColor;
+    ctx.lineWidth = borderWidth;
+    ctx.stroke();
+}
+
+/**
+ * 텍스트 노드 렌더링
+ */
+function renderTextNode(canvas, nodeData, qualityScale) {
+    const ctx = canvas.getContext('2d');
+
+    // ★ 핵심: ctx.scale로 좌표계 축소 (기존 메인 스레드 방식과 동일)
+    // 캔버스는 작지만 원본 좌표로 그리면 알아서 축소됨
+    ctx.scale(qualityScale, qualityScale);
+
+    // 원본 크기 기준으로 계산 (scale 적용되어 실제론 작아짐)
+    const width = canvas.width / qualityScale;
+    const height = canvas.height / qualityScale;
+
+    // 배경 그리기 (원본 크기 좌표)
+    ctx.fillStyle = '#ffffff';
+    ctx.fillRect(0, 0, width, height);
+    drawBackground(ctx, width, height, false);
+
+    // 텍스트 설정 (원본 크기)
+    const zoomLevel = 2;
+    const fontSize = 14 * zoomLevel;
+    const lineHeight = fontSize * 1.5;
+    const padding = 16 * zoomLevel;
+    const textColor = '#1f2937';
+
+    ctx.font = `${fontSize}px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`;
+    ctx.fillStyle = textColor;
+    ctx.textBaseline = 'top';
+
+    // 마크다운 → 플레인 텍스트
+    const content = nodeData.response || nodeData.prompt || '';
+    const plainText = markdownToPlainText(content);
+
+    // 줄 바꿈 처리
+    const maxTextWidth = width - padding * 2;
+    const lines = wrapText(ctx, plainText, maxTextWidth);
+
+    // 텍스트 그리기
+    let y = padding;
+    const maxY = height - padding;
+
+    for (const line of lines) {
+        if (y + lineHeight > maxY) {
+            // 하단 페이드아웃
+            const gradient = ctx.createLinearGradient(0, height - 50, 0, height);
+            gradient.addColorStop(0, 'rgba(255,255,255,0)');
+            gradient.addColorStop(1, 'rgba(255,255,255,1)');
+            ctx.fillStyle = gradient;
+            ctx.fillRect(0, height - 50, width, 50);
+            break;
+        }
+
+        ctx.fillStyle = textColor;
+        ctx.fillText(line, padding, y);
+        y += lineHeight;
+    }
+}
+
+/**
+ * 메시지 핸들러
+ */
+self.onmessage = async function (e) {
+    const { type, nodeData, width, height, qualityScale, requestId } = e.data;
+
+    if (type !== 'renderTexture') {
+        return;
+    }
+
+    try {
+        // ★ qualityScale 적용하여 작은 캔버스 생성 (메모리 절약)
+        // width, height: 원본 크기 (styleW, styleH)
+        // 실제 캔버스: width * qualityScale, height * qualityScale
+        const renderWidth = Math.round(width * qualityScale);
+        const renderHeight = Math.round(height * qualityScale);
+
+        const canvas = new OffscreenCanvas(renderWidth, renderHeight);
+
+        // renderTextNode는 캔버스 크기 기준으로 렌더링
+        renderTextNode(canvas, nodeData, qualityScale);
+
+        // ImageBitmap으로 변환 (복사 없이 전달)
+        const bitmap = canvas.transferToImageBitmap();
+
+        // 결과 전송
+        self.postMessage({
+            type: 'textureReady',
+            requestId: requestId,
+            bitmap: bitmap,
+            width: width,
+            height: height
+        }, [bitmap]); // Transferable로 전달
+
+    } catch (error) {
+        self.postMessage({
+            type: 'error',
+            requestId: requestId,
+            error: error.message
+        });
+    }
+};
+
+// Worker 준비 완료 알림
+self.postMessage({ type: 'ready' });