-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathLLM-Web-Dev.html
More file actions
120 lines (116 loc) · 5.86 KB
/
Copy pathLLM-Web-Dev.html
File metadata and controls
120 lines (116 loc) · 5.86 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Chat + Code Editor</title>
<!-- CodeMirror CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/theme/dracula.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<!-- Left side - Chat -->
<div class="chat-section">
<div class="panel-header">
<span class="header-title">LLM Chat</span>
<div class="header-controls">
<button class="btn btn-success" id="newChatButton" title="Clear Context and Start a New Conversation">New Chat</button>
<button class="btn btn-primary" id="configButton" title="Settings for your LLM">Configure API</button>
</div>
</div>
<div class="messages-container" id="messages">
<div class="message system-message">
Please configure the API settings to start chatting with the LLM.
</div>
</div>
<div class="panel-footer">
<div class="chat-input-container">
<textarea class="chat-input" id="chatInput" placeholder="Type your message here..."></textarea>
<button class="btn btn-primary send-button" id="sendButton" disabled>Send</button>
</div>
</div>
</div>
<!-- Right side - Code Editor -->
<div class="editor-section">
<div class="panel-header">
<span class="header-title">Web Prototyping</span>
<div class="tabs">
<button class="tab active" id="htmlTab">HTML</button>
<button class="tab" id="cssTab">CSS</button>
<button class="tab" id="jsTab">JavaScript</button>
</div>
<div class="header-controls">
<button class="btn btn-undo" id="undoButton" title="Undo (Ctrl+Z)" disabled>↶ Undo</button>
<button class="btn btn-redo" id="redoButton" title="Redo (Ctrl+Shift+Z)" disabled>↷ Redo</button>
</div>
</div>
<div class="editor-container">
<div class="editor-pane active" id="htmlEditor"></div>
<div class="editor-pane" id="cssEditor"></div>
<div class="editor-pane" id="jsEditor"></div>
</div>
<div class="panel-footer controls">
<button class="btn btn-primary" id="downloadButton" title="Combine Code and download in a single HTML File.">Download HTML</button>
<button class="btn btn-success" id="renderButton" title="Combine Code and render preview">Render Preview</button>
</div>
</div>
</div>
<!-- Preview Modal -->
<div class="preview-modal" id="previewModal">
<div class="preview-content">
<div class="preview-header">
<h3>Preview</h3>
<span class="close-preview" id="closePreview">×</span>
</div>
<iframe class="preview-frame" id="previewFrame"></iframe>
</div>
</div>
<!-- Config Modal -->
<div class="config-modal" id="configModal">
<div class="config-content">
<div class="config-header">
<h3>API Configuration</h3>
<span class="close-config" id="closeConfig">×</span>
</div>
<form class="config-form" id="configForm">
<div class="form-group">
<label for="apiEndpoint">API Endpoint</label>
<input type="url" id="apiEndpoint" placeholder="https://api.openai.com/v1/chat/completions" required>
</div>
<div class="form-group">
<label for="apiKey">API Key</label>
<input type="password" id="apiKey" placeholder="sk-..." required>
</div>
<div class="form-group">
<label for="modelName">Model Name</label>
<input type="text" id="modelName" placeholder="GPT-4" required>
</div>
<div class="form-group checkbox-group">
<label>
<input type="checkbox" id="includeCodeContext" checked>
Include current code as context in AI conversations
</label>
<p class="help-text">When enabled, the AI will be aware of your current code and can make more contextual suggestions.</p>
</div>
<div class="form-group checkbox-group">
<label>
<input type="checkbox" id="autoApply">
Automatically apply AI code suggestions to editor
</label>
<p class="help-text">When enabled, code blocks from the AI will be automatically applied to the corresponding editor tabs. Use with caution!</p>
</div>
<button type="submit" class="save-config">Save Configuration</button>
</form>
</div>
</div>
<!-- CodeMirror JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/css/css.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/javascript/javascript.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.13/mode/xml/xml.min.js"></script>
<script src="script.js" defer></script>
</body>
</html>