VPR/assistant.html at main · windows10101713/VPR · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VPR | Assistant</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <link rel="stylesheet" href="hljs-theme.min.css" />
    <script src="hljs.min.js"></script>
  </head>
  <body data-page="assistant">
    <div class="app-shell">
      <aside class="sidebar">
        <div>
          <a class="brand brand-link" href="index.html">
            <div class="brand-mark">V</div>
            <div>
              <p class="eyebrow">Virtual Program Runner</p>
              <h1>VPR</h1>
            </div>
          </a>
          <nav class="menu">
            <a class="menu-item" href="index.html"><span>홈</span><small>Home</small></a>
            <a class="menu-item" href="editor.html"><span>에디터</span><small>Editor</small></a>
            <a class="menu-item" href="examples.html"><span>예제</span><small>Examples</small></a>
            <a class="menu-item is-active" href="assistant.html"><span>AI 도우미</span><small>Assistant</small></a>
            <a class="menu-item" href="errors.html"><span>에러 해결</span><small>Error Fix</small></a>
            <a class="menu-item" href="community.html"><span>공유</span><small>Community</small></a>
          </nav>
        </div>
        <div class="sidebar-card">
          <p class="eyebrow">학습 보조</p>
          <h2>아이디어와 언어 학습</h2>
          <p>에디터와 분리해 생각 정리와 주제 탐색에 집중하도록 구성했습니다.</p>
        </div>
      </aside>

      <main class="main-content page-stack">
        <header class="topbar">
          <div>
            <p class="eyebrow">Assistant Workspace</p>
            <h2 id="page-title">아이디어 추천과 언어 학습 보조</h2>
          </div>
          <div class="topbar-actions">
            <label class="language-switch" for="localeSelect">
              <span>언어</span>
              <select id="localeSelect">
                <option value="ko">한국어</option>
                <option value="en">English</option>
              </select>
            </label>
            <label class="language-switch" for="themeSelect">
              <span>테마</span>
              <select id="themeSelect">
                <option value="light">Light</option>
                <option value="dark">Dark</option>
              </select>
            </label>
            <a class="primary-button" href="editor.html">에디터로 이동</a>
          </div>
        </header>

        <section class="page-intro">
          <div>
            <p class="eyebrow">AI Support</p>
            <h3>아이디어 생성과 학습 포인트를 별도 화면에서</h3>
          </div>
          <p>입문자는 코딩 전 단계에서 막히는 일이 많기 때문에 아이디어 탐색과 학습 가이드를 분리했습니다.</p>
        </section>

        <section class="feature-grid">
          <article class="feature-card">
            <p class="eyebrow">Free AI Gateway</p>
            <h3>무료 AI 모델 연결 설정</h3>
            <label>
              무료 AI 모델
              <select id="aiProviderSelect" class="full-width-select">
                <option value="huggingface">Hugging Face Inference API (무료)</option>
              </select>
            </label>
            <label>
              모델 선택
              <select id="aiModelSelect" class="full-width-select">
                  <option value="facebook/bart-large-cnn">BART Large CNN (요약)</option>
                  <option value="google-t5/t5-small">T5 Small (번역/일반 텍스트)</option>
                  <option value="google-t5/t5-base">T5 Base (번역/일반 텍스트)</option>
                  <option value="google/pegasus-xsum">PEGASUS XSum (요약)</option>
                  <option value="facebook/bart-large-xsum">BART Large XSum (요약)</option>
                  <option value="google/madlad400-3b-mt">MADLAD400 3B MT (다국어 번역)</option>
                  <option value="Falconsai/text_summarization">Falconsai Text Summarization</option>
                  <option value="HuggingFaceBio/Carbon-3B">Carbon-3B (text-generation)</option>
              </select>
            </label>
            <label>
              Hugging Face API Key
              <input id="aiApiKeyInput" type="password" placeholder="HF_TOKEN 환경변수 또는 huggingface.co 토큰" />
            </label>
            <div class="button-row">
              <button class="secondary-button small" id="aiTestButton" type="button">연결 테스트</button>
              <button class="secondary-button small" id="aiModelAuditButton" type="button">모델 전체 점검</button>
              <button class="primary-button small" id="aiSaveButton" type="button">설정 저장</button>
            </div>
            <div class="response-box" id="aiConfigStatus"></div>
          </article>
        </section>

        <section class="feature-grid">
          <article class="feature-card">
            <p class="eyebrow">AI Chat Room</p>
            <h3>채팅방 기반 AI 대화</h3>
            <label>
              채팅방
              <select id="chatRoomSelect" class="full-width-select"></select>
            </label>
            <div class="button-row">
              <input id="chatRoomNameInput" type="text" placeholder="새 채팅방 이름 (예: JS 학습방)" />
              <button class="secondary-button small" id="chatRoomCreateButton" type="button">방 추가</button>
              <button class="secondary-button small" id="chatRoomDeleteButton" type="button">현재 방 삭제</button>
            </div>
            <div class="response-box learning-box" id="chatMessages">메시지가 여기에 표시됩니다.</div>
            <textarea id="chatInput" placeholder="코드 중심 질문을 입력하세요. 기본 답변은 쉬운 영어 + 실행 가능한 코드 우선으로 나옵니다."></textarea>
            <div class="button-row">
              <button class="primary-button small" id="chatSendButton" type="button">메시지 보내기</button>
            </div>
          </article>
        </section>

        <section class="feature-grid assistant-layout">
          <article class="feature-card">
            <p class="eyebrow">AI 아이디어 생성</p>
            <h3>프로젝트 아이디어 추천</h3>
            <textarea id="ideaPrompt" placeholder="예: 파이썬으로 만들 수 있는 초보자용 게임 아이디어"></textarea>
            <button class="primary-button small" id="ideaButton" type="button">아이디어 받기</button>
            <div class="response-box" id="ideaResponse"></div>
          </article>

          <article class="feature-card">
            <p class="eyebrow">학습 보조</p>
            <h3>선택 언어 학습 가이드</h3>
            <label>
              언어
              <select id="assistantLanguageSelect" class="full-width-select"></select>
            </label>
            <div class="response-box learning-box" id="learningGuide"></div>
          </article>
        </section>

        <section class="feature-grid">
          <article class="feature-card">
            <p class="eyebrow">AI 코드 코치</p>
            <h3>코드 개선 제안</h3>
            <label>
              언어
              <select id="coachLanguageSelect" class="full-width-select"></select>
            </label>
            <textarea id="coachCodeInput" placeholder="개선받을 코드를 붙여넣으세요"></textarea>
            <input id="coachGoalInput" type="text" placeholder="목표 예: 속도 개선, 가독성 향상, 버그 줄이기" />
            <button class="primary-button small" id="coachButton" type="button">AI 개선안 생성</button>
            <div class="response-box" id="coachResponse"></div>
          </article>

          <article class="feature-card">
            <p class="eyebrow">AI 설계 플래너</p>
            <h3>구현 단계 추천</h3>
            <textarea id="plannerPrompt" placeholder="예: 사용자 로그인 + 게시글 CRUD + 검색 기능을 만들고 싶어요"></textarea>
            <button class="secondary-button small" id="plannerButton" type="button">단계별 계획 받기</button>
            <div class="response-box" id="plannerResponse"></div>
          </article>
        </section>
      </main>
    </div>

    <script src="app.js"></script>
  </body>
</html>