-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (164 loc) · 8.66 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Programming Documentation Generator</title>
<!-- Import Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/index.css">
<!-- Import Highlight.js -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
<!-- Add SweetAlert2 CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
<!-- Add SweetAlert2 JS -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Add Favicon -->
<link rel="icon" href="favicon.png" type="image/png">
<meta name="description"
content="AI Programming Documentation Generator - Generate programming documentation using AI.">
<meta name="keywords" content="AI, programming, documentation, generator, OpenAI, GPT-4">
<meta name="author" content="codefreelance.net">
</head>
<body>
<nav class="fixed-nav" role="navigation" aria-label="Main Navigation">
<a href="#inputForm">Input Form</a>
<a href="#ai-prompts">AI Prompts</a>
<a href="#promptManagement">Manage Prompts</a>
<a href="#promptSelection">Select Prompts</a>
<button type="button" id="generatePrompts" class="btn btn-primary ml-3"
aria-label="Generate Prompts">Generate</button>
<button id="themeToggle" class="btn btn-secondary ml-3" aria-pressed="false"
aria-label="Toggle Dark Mode">Toggle Dark Mode</button>
<button type="button" id="downloadAllBtn" class="btn btn-success ml-3"
aria-label="Download All Documentation">Download All</button>
<button type="button" id="copyAllBtn" class="btn btn-info ml-3" aria-label="Copy All Documentation">Copy
All</button>
</nav>
<div id="fullScreenLoader" role="status" aria-live="polite">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<main class="container main-content">
<h1 class="page-title">AI Programming Documentation Generator</h1>
<div class="disclaimer" role="note">
**Note:** This AI system generates responses based on patterns identified in its training data. While it
strives for accuracy, the generated code may not be perfect and should be thoroughly tested before use in
production.
</div>
<form id="inputForm" aria-labelledby="inputFormTitle">
<h2 id="inputFormTitle" class="visually-hidden">Input Form</h2>
<div class="form-group">
<label for="languageInput">Programming Language</label>
<input type="text" id="languageInput" class="form-control" placeholder="Enter programming language"
required aria-required="true">
</div>
<div class="form-group">
<label for="modelSelect">Select Model</label>
<select id="modelSelect" class="form-control" aria-required="true">
<option value="qwen2.5-coder:1.5b">qwen2.5-coder:1.5b</option>
<option value="qwen2.5-coder:3b">qwen2.5-coder:3b</option>
<option value="qwen2.5-coder:latest">qwen2.5-coder:latest</option>
<option value="llama3.2:1b">llama3.2:1b</option>
<option value="llama3.2:latest">llama3.2:latest</option>
<option value="llama3.1:latest">llama3.1:latest</option>
<option value="custom">Custom</option>
</select>
<input type="text" id="customModelInput" class="form-control mt-2" placeholder="Enter custom model"
style="display: none;" aria-label="Custom Model Input">
</div>
<div class="button-group">
<button type="button" class="btn btn-danger" id="clearBtn" aria-label="Clear Form">Clear Form</button>
</div>
</form>
<div class="api-key-info alert alert-info mt-3" role="alert" aria-live="polite">
<p class="mb-0">
<!-- Removed reference to OpenAI API key -->
To use this application, ensure your Ollama server is running and accessible at the configured endpoint.
</p>
</div>
<div id="loadingIndicator" class="loading-spinner" style="display: none;"></div>
<nav id="navigationMenu" class="mt-4" aria-label="Documentation Navigation">
</nav>
<section id="ai-prompts" class="mt-4" aria-labelledby="aiPromptsTitle">
<h2 id="aiPromptsTitle" class="visually-hidden">AI Prompts</h2>
</section>
<section id="promptManagement" class="mt-5" aria-labelledby="promptManagementTitle">
<h2 id="promptManagementTitle">Manage AI Prompts</h2>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Add Category</h5>
<form id="addCategoryForm">
<div class="form-group">
<label for="newCategoryName">Category Name</label>
<input type="text" id="newCategoryName" class="form-control"
placeholder="Enter new category name" required>
</div>
<button type="submit" class="btn btn-primary">Add Category</button>
</form>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Add Prompt</h5>
<form id="addPromptForm">
<div class="form-group">
<label for="selectCategory">Select Category</label>
<select id="selectCategory" class="form-control" required>
</select>
</div>
<div class="form-group">
<label for="newPrompt">Prompt</label>
<input type="text" id="newPrompt" class="form-control" placeholder="Enter new prompt"
required>
</div>
<button type="submit" class="btn btn-primary">Add Prompt</button>
</form>
</div>
</div>
<div id="existingPrompts">
</div>
</section>
<section id="promptSelection" class="mt-5" aria-labelledby="promptSelectionTitle">
<h2 id="promptSelectionTitle">Select Prompts to Generate</h2>
<div class="mb-3">
<button id="selectAllBtn" class="btn btn-secondary btn-sm">Select All</button>
<button id="deselectAllBtn" class="btn btn-secondary btn-sm">Deselect All</button>
</div>
<div id="selectionPrompts">
</div>
</section>
</main>
<script src="js/index.js"></script>
<script>
document.getElementById('modelSelect').addEventListener('change', function () {
const customInput = document.getElementById('customModelInput');
if (this.value === 'custom') {
customInput.style.display = 'block';
customInput.setAttribute('aria-hidden', 'false');
} else {
customInput.style.display = 'none';
customInput.setAttribute('aria-hidden', 'true');
}
});
document.getElementById('copyAllBtn').addEventListener('click', function () {
const prompts = document.querySelectorAll('#ai-prompts pre');
let allText = '';
prompts.forEach(prompt => {
allText += prompt.textContent + '\n\n';
});
navigator.clipboard.writeText(allText).catch(err => {
console.error('Failed to copy text: ', err);
});
});
// Ensure dynamic content updates are announced
const aiPromptsSection = document.getElementById('ai-prompts');
aiPromptsSection.setAttribute('aria-live', 'polite');
</script>
</body>
</html>