code2

Running

App Files Files Community

kimhyunwoo commited on 3 days ago

Commit

ce2c049

verified ·

1 Parent(s): 85f43bb

Create index.html

Browse files

Files changed (1) hide show

index.html +349 -0

index.html ADDED Viewed

	@@ -0,0 +1,349 @@

+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI 코딩 도우미 (단일 파일)</title>
+    <!-- Monaco Editor 로더 CSS -->
+    <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/editor/editor.main.min.css">
+    <style>
+        /* 이전 style.css 내용 전체를 여기에 붙여넣습니다. */
+        body {
+            font-family: sans-serif;
+            margin: 0;
+            background-color: #f4f4f4;
+            color: #333;
+            padding: 20px;
+        }
+        .container {
+            max-width: 1200px;
+            margin: auto;
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        }
+        h1, h2 {
+            color: #333;
+            text-align: center;
+            margin-bottom: 20px;
+        }
+        .main-layout {
+            display: flex;
+            flex-wrap: wrap; /* 작은 화면에서 줄바꿈되도록 */
+            gap: 20px;
+            margin-bottom: 20px;
+        }
+        .editor-pane, .control-pane {
+            flex: 1;
+            min-width: 300px; /* 최소 너비 지정 */
+            padding: 15px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            background-color: #f9f9f9;
+        }
+        .editor-pane h2, .control-pane h2 {
+            margin-top: 0;
+            text-align: left;
+        }
+        textarea {
+            width: calc(100% - 22px); /* padding and border */
+            min-height: 80px;
+            padding: 10px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            font-size: 14px;
+            box-sizing: border-box; /* 너비 계산에 padding, border 포함 */
+        }
+        button {
+            display: block;
+            width: 100%;
+            padding: 10px;
+            background-color: #007bff;
+            color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            margin-bottom: 10px;
+            box-sizing: border-box;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+        .editor-actions {
+            margin-top: 10px;
+            display: flex;
+            gap: 10px;
+            align-items: center;
+        }
+        .editor-actions button {
+            width: auto;
+            flex-grow: 1;
+        }
+        #languageSelect {
+            padding: 10px;
+            border-radius: 4px;
+            border: 1px solid #ccc;
+            height: 40px; /* 버튼과 높이 맞춤 */
+            box-sizing: border-box;
+        }
+        .preview-pane {
+            margin-top: 20px;
+            padding: 15px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            background-color: #f9f9f9;
+        }
+        #html-preview {
+            width: 100%;
+            height: 400px;
+            border: 1px solid #ccc;
+            background-color: #fff;
+        }
+        /* 로딩 스피너 스타일 */
+        .loader {
+            border: 5px solid #f3f3f3; /* Light grey */
+            border-top: 5px solid #3498db; /* Blue */
+            border-radius: 50%;
+            width: 30px;
+            height: 30px;
+            animation: spin 1s linear infinite;
+            margin: 10px auto;
+            display: none; /* 기본 숨김 */
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>AI 코딩 도우미 (단일 파일)</h1>
+        <div class="main-layout">
+            <div class="editor-pane">
+                <h2>코드 에디터</h2>
+                <div id="editor-container" style="width:100%;height:400px;border:1px solid #ccc;"></div>
+                <div class="editor-actions">
+                    <button id="getCompletionBtn">코드 자동완성 (FIM)</button>
+                    <select id="languageSelect">
+                        <option value="python">Python</option>
+                        <option value="javascript" selected>JavaScript</option>
+                        <option value="html">HTML</option>
+                        <option value="css">CSS</option>
+                        <option value="java">Java</option>
+                        <option value="csharp">C#</option>
+                    </select>
+                </div>
+            </div>
+            <div class="control-pane">
+                <h2>HTML 생성 (대화형)</h2>
+                <textarea id="html-prompt" placeholder="예: '빨간색 배경의 환영 메시지 페이지 만들어줘'"></textarea>
+                <button id="generateHtmlBtn">HTML 생성 및 미리보기</button>
+                <div id="htmlLoader" class="loader"></div>
+                <h2>일반 코드 생성 (명령형)</h2>
+                <textarea id="code-prompt" placeholder="예: '주어진 리스트를 정렬하는 파이썬 함수 만들어줘'"></textarea>
+                <button id="generateCodeBtn">코드 생성</button>
+                <div id="codeLoader" class="loader"></div>
+            </div>
+        </div>
+        <div id="completionLoader" class="loader" style="text-align: center; width: 100%;"></div>
+        <div class="preview-pane">
+            <h2>HTML 미리보기</h2>
+            <iframe id="html-preview" sandbox="allow-scripts allow-same-origin"></iframe>
+        </div>
+    </div>
+    <!-- Monaco Editor 로더 JS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script>
+    <script>
+        // 이전 script.js 내용 전체를 여기에 붙여넣습니다.
+        let editor;
+        // 로더 요소 가져오기
+        const htmlLoader = document.getElementById('htmlLoader');
+        const codeLoader = document.getElementById('codeLoader');
+        const completionLoader = document.getElementById('completionLoader');
+        function showLoader(loaderElement) {
+            if (loaderElement) loaderElement.style.display = 'block';
+        }
+        function hideLoader(loaderElement) {
+            if (loaderElement) loaderElement.style.display = 'none';
+        }
+        require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' }});
+        require(['vs/editor/editor.main'], function() {
+            editor = monaco.editor.create(document.getElementById('editor-container'), {
+                value: [
+                    '// 여기에 코드를 입력하거나 AI에게 생성을 요청하세요.',
+                    '// HTML 생성 시 이곳과 미리보기 창에 결과가 표시됩니다.'
+                ].join('\n'),
+                language: 'javascript', // 기본 언어
+                theme: 'vs-dark',
+                automaticLayout: true,
+                wordWrap: 'on', // 자동 줄바꿈
+                minimap: { enabled: false } // 미니맵 비활성화 (선택 사항)
+            });
+        });
+        const htmlPromptEl = document.getElementById('html-prompt');
+        const codePromptEl = document.getElementById('code-prompt');
+        const generateHtmlBtn = document.getElementById('generateHtmlBtn');
+        const generateCodeBtn = document.getElementById('generateCodeBtn');
+        const getCompletionBtn = document.getElementById('getCompletionBtn');
+        const languageSelect = document.getElementById('languageSelect');
+        const htmlPreviewEl = document.getElementById('html-preview');
+        languageSelect.addEventListener('change', (event) => {
+            if (editor) {
+                monaco.editor.setModelLanguage(editor.getModel(), event.target.value);
+            }
+        });
+        generateHtmlBtn.addEventListener('click', async () => {
+            const prompt = htmlPromptEl.value.trim();
+            if (!prompt) {
+                alert('HTML 생성 요청 내용을 입력해주세요.');
+                return;
+            }
+            showLoader(htmlLoader);
+            generateHtmlBtn.disabled = true;
+            try {
+                const response = await fetch('/api/generate-html', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ prompt })
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                if (editor) {
+                    editor.setValue(data.html);
+                    monaco.editor.setModelLanguage(editor.getModel(), 'html');
+                }
+                htmlPreviewEl.srcdoc = data.html;
+            } catch (error) {
+                console.error('HTML 생성 오류:', error);
+                alert(`HTML 생성 중 오류가 발생했습니다: ${error.message}`);
+                if (editor) editor.setValue(`// HTML 생성 오류: ${error.message}`);
+                htmlPreviewEl.srcdoc = `<h3>오류 발생</h3><p>${error.message}</p>`;
+            } finally {
+                hideLoader(htmlLoader);
+                generateHtmlBtn.disabled = false;
+            }
+        });
+        generateCodeBtn.addEventListener('click', async () => {
+            const prompt = codePromptEl.value.trim();
+            const language = languageSelect.value;
+            if (!prompt) {
+                alert('코드 생성 요청 내용을 입력해주세요.');
+                return;
+            }
+            showLoader(codeLoader);
+            generateCodeBtn.disabled = true;
+            try {
+                const response = await fetch('/api/generate-code', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ prompt, language })
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                if (editor) {
+                    editor.setValue(data.code);
+                    monaco.editor.setModelLanguage(editor.getModel(), language);
+                }
+            } catch (error) {
+                console.error('코드 생성 오류:', error);
+                alert(`코드 생성 중 오류가 발생했습니다: ${error.message}`);
+                if (editor) editor.setValue(`// 코드 생성 오류: ${error.message}`);
+            } finally {
+                hideLoader(codeLoader);
+                generateCodeBtn.disabled = false;
+            }
+        });
+        getCompletionBtn.addEventListener('click', async () => {
+            if (!editor) return;
+            const model = editor.getModel();
+            const position = editor.getPosition();
+            const fullCode = model.getValue();
+            // FIM API는 빈 prefix/suffix도 허용하므로, 커서 위치 기준으로 나눔
+            const offset = model.getOffsetAt(position);
+            const prefix = fullCode.substring(0, offset);
+            const suffix = fullCode.substring(offset);
+            const language = languageSelect.value; // 현재 선택된 에디터 언어
+            // FIM은 빈 내용에서도 작동할 수 있으나, 사용자가 혼란스러울 수 있으므로 최소한의 입력 유도 (선택사항)
+            // if (prefix.trim() === '' && suffix.trim() === '') {
+            //     alert('자동완성을 위해 코드 일부를 입력하거나 커서를 특정 위치에 두세요.');
+            //     return;
+            // }
+            showLoader(completionLoader);
+            getCompletionBtn.disabled = true;
+            try {
+                const response = await fetch('/api/complete-code', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ prefix, suffix, language }) // language는 FIM API에서 직접 사용 안될 수 있음
+                });
+                if (!response.ok) {
+                    const errorData = await response.json();
+                    throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                // 현재 커서 위치에 제안된 코드를 삽입
+                editor.executeEdits("api-completion", [{
+                    range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
+                    text: data.completion
+                }]);
+                // 삽입 후 커서를 제안된 텍스트의 끝으로 이동 (선택 사항)
+                // editor.setPosition(editor.getModel().getFullModelRange().getEndPosition());
+            } catch (error) {
+                console.error('코드 자동완성 오류:', error);
+                alert(`코드 자동완성 중 오류가 발생했습니다: ${error.message}`);
+            } finally {
+                hideLoader(completionLoader);
+                getCompletionBtn.disabled = false;
+            }
+        });
+    </script>
+</body>
+</html>