-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpopup.html
171 lines (153 loc) · 9.55 KB
/
popup.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mórfosis</title>
<link href="src/styles.css" rel="stylesheet" />
</head>
<body class="bg-gray-100 p-4 min-w-[36rem] h-full overflow-y-auto">
<div class="flex justify-between items-center border-b border-gray-900/10 pb-6">
<h1 class="text-xl font-bold mb-4">Mórfosis</h1>
<button id="enableSwitch" type="button" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2 disabled:bg-gray-200" role="switch" aria-checked="false">
<span class="sr-only">Use setting</span>
<span aria-hidden="true" class="pointer-events-none inline-block size-5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
</button>
</div>
<div class="space-y-4">
<section class="mt-4">
<h2 class="text-xl font-semibold text-gray-800 mb-2">Keyboard Shortcuts for AI Assistance</h2>
<ul class="list-disc pl-6 space-y-2 text-gray-600">
<li>
<span class="font-medium text-gray-800">Ctrl + M:</span> Opens the AI chat interface.
</li>
<li>
<span class="font-medium text-gray-800">Ctrl + J:</span> Execute AI commands on selected text.
<br>
<span class="italic">Example:</span> "Create a Facebook post about..."
</li>
<li>
<span class="font-medium text-gray-800">Ctrl + /:</span> Run multiple AI prompts in sequence (recipes).
</li>
</ul>
</section>
<section class="mt-4">
<h2 class="text-xl font-semibold text-gray-800 mb-2">Recipe Example Format</h2>
<div class="space-y-4">
<div>
<h3 class="text-lg font-medium text-gray-700">Using Recipe Commands</h3>
<p class="text-gray-600">
Recipes allow you to chain multiple AI operations together. Each command can reference previous outputs when <code class="bg-gray-200 text-gray-800 px-1 rounded">lookBack="true"</code>.
</p>
<ul class="list-disc pl-6 space-y-2 text-gray-600">
<li><strong>First Command:</strong> Generates initial content.</li>
<li><strong>Subsequent Commands:</strong> Build upon previous results.</li>
<li><strong>Final Command:</strong> Provides recommendations based on accumulated context.</li>
</ul>
</div>
<div>
<h3 class="text-lg font-medium text-gray-700 mb-2">Example Recipe Flow</h3>
<pre class="bg-gray-900 text-gray-100 p-4 rounded-md text-sm overflow-auto">
[command prompt="Create a section titled 'Ingredients' and list only the ingredients required to make a basic homemade pizza. Avoid preparation steps or additional context. Include the subtitle as part of the output."
systemPrompt="You are a professional chef specializing in Italian cuisine. Provide a clear, concise list of ingredients." lookBack="false"]
[command prompt="Create a section titled 'Preparation' and describe the step-by-step preparation process for making a homemade pizza using only the ingredients provided above. Avoid listing ingredients again. Include the subtitle as part of the output."
systemPrompt="You are a professional chef specializing in Italian cuisine. Focus solely on preparation steps based on the previous content." lookBack="true"]
[command prompt="Create a section titled 'Recommendations' and provide tips and tricks for improving the process or enhancing the pizza's flavor based on the ingredients and preparation steps above. Avoid repeating steps or ingredients. Include the subtitle as part of the output."
systemPrompt="You are a professional chef specializing in Italian cuisine. Offer concise, practical advice specific to this recipe." lookBack="true"]
</pre>
</div>
</div>
</section>
<section class="mt-4">
<h2 class="text-xl font-semibold text-gray-800 mb-2">Best Practices</h2>
<ul class="list-disc pl-6 space-y-2 text-gray-600">
<li><strong>Select text:</strong> Ensure the text you want to process is selected before using shortcuts.</li>
<li><strong>Be specific:</strong> Write clear and precise prompts for better results.</li>
<li><strong>Leverage system prompts:</strong> Define AI expertise to align with your needs.</li>
<li><strong>Use <code class="bg-gray-200 text-gray-800 px-1 rounded">lookBack</code>:</strong> Enable it when commands need context from previous steps.</li>
</ul>
</section>
<section class="mt-4">
<h2 class="text-xl font-semibold text-gray-800 mb-2">Configure Options</h2>
<p class="text-gray-600">
Configure the options for rewriting, summarizing, suggesting, and translating text. Then select the text you want to process and click on the <span class="font-medium text-gray-800">Mórfosis</span> icon in the browser toolbar. Alternatively, you can use the following keyboard shortcuts for quick AI assistance:
</p>
</section>
</div>
<form id="configForm" class="mb-12">
<div class="space-y-12">
<div class="border-b border-gray-900/10 py-6">
<h2 class="text-base/7 font-semibold text-gray-900">
Rewrite
</h2>
<p class="mt-1 text-sm/6 text-gray-600">
Configures the options for rewriting the text.
</p>
<div class="mt-4">
<label for="customCommand" class="block text-sm/6 font-medium text-gray-900">
Custom Command
</label>
<div class="mt-2">
<textarea
name="customCommand"
id="customCommand"
rows="3"
class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 disabled:bg-gray-200"
placeholder="Enter the custom command for rewriting here..."
></textarea>
</div>
</div>
</div>
</div>
<div class="border-b border-gray-900/10 py-6">
<h2 class="text-base/7 font-semibold text-gray-900">
Summarize
</h2>
<p class="mt-1 text-sm/6 text-gray-600">
Configures the options for summarizing the text.
</p>
<div class="mt-4">
<label for="length" class="block text-sm/6 font-medium text-gray-900">
Length of the summary
</label>
<div class="mt-2 grid grid-cols-1">
<select id="length" name="length" autocomplete="length" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 disabled:bg-gray-200">
<option value="short">Short</option>
<option value="medium">Medium</option>
<option value="long">Long</option>
</select>
<svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</div>
</div>
</div>
<div class="border-b border-gray-900/10 py-6">
<h2 class="text-base/7 font-semibold text-gray-900">
Suggestions
</h2>
<p class="mt-1 text-sm/6 text-gray-600">
Configures the options for the suggestions.
</p>
<div class="mt-4">
<label for="systemPrompt" class="block text-sm/6 font-medium text-gray-900">System Prompt</label>
<div class="mt-2">
<textarea name="systemPrompt" id="systemPrompt" rows="3" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 disabled:bg-gray-200" placeholder="Enter the system prompt here..."></textarea>
</div>
</div>
<div class="mt-4">
<label for="templatePrompt" class="block text-sm/6 font-medium text-gray-900">Template Prompt</label>
<div class="mt-2">
<textarea name="templatePrompt" id="templatePrompt" rows="3" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6 disabled:bg-gray-200" placeholder="Enter the template prompt here. Use {SELECTED_TEXT} to indicate where the selected text should be inserted."></textarea>
</div>
</div>
</div>
</div>
<div class="mt-6">
<button type="submit" class="w-full rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:opacity-50">Save</button>
</div>
<div id="messages"></div>
</form>
<script src="popup.js"></script>
</body>
</html>