alpha feature: PromptCritic (#143)

Co-authored-by: swyxio <swyxio@users.noreply.github.com>

README.md

@@ -22,8 +22,9 @@ Yes and no:
 
 1. SOTA functionality is often released without API (eg: ChatGPT Code Interpreter, Bing Image Creator, Bard Multimodal Input, Claude Multifile Upload). **We insist on using webapps** so that you have full access to all functionality on launch day. We also made light/dark mode for each app, just for fun (`Cmd+Shift+L`)
 2. This is a menubar app that can be invoked with a keyboard shortcut (Cmd+Shift+G). Feels a LOT faster than having it live in a browser window somewhere and is easy to pull up/dismiss during long generations.
-3. Supports local models like LLaMa and Vicuna via [OobaBooga](https://github.com/oobabooga/text-generation-webui).
+3. Supports no-API models like Perplexity and Poe, and local models like LLaMa and Vicuna (via [OobaBooga](https://github.com/oobabooga/text-generation-webui)).
 4. No paywall, build from source.
+5. Fancy new features like PromptCritic (AI assisted prompt improvement) and keyboard shortcut quick open from anywhere.
 
 ## Supported LLM Providers
 
@@ -77,8 +78,11 @@ Yes and no:
   - The UI only supports one kind of prompt template. Contributions are welcome to make the templating customizable (see the Oobabooga.js provider).
 
 - **Starting New Conversations**:
+
   - Use `Cmd+R` to start a new conversation with a simple window refresh.
 
+- **Prompt Critic**: Uses Llama 2 to improve your prompting when you want it!
+
 ## video demo
 
 - original version https://youtu.be/jrlxT1K4LEU

package.json

@@ -47,7 +47,8 @@
 		"react-dom": "^18.2.0",
 		"react-router-dom": "^6.11.2",
 		"react-split": "^2.0.14",
-		"tailwind-merge": "^1.14.0"
+		"tailwind-merge": "^1.14.0",
+		"vex-js": "^4.1.0"
 	},
 	"repository": {
 		"type": "git",

src/main/main.ts

@@ -66,6 +66,63 @@ ipcMain.on('get-always-on-top', async (event, property, val) => {
 	event.returnValue = bool;
 });
 
+// thanks claude
+
+function timeout(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+async function getLlamaResponse(prompt: string) {
+	const win = new BrowserWindow({
+		// show: true,
+		show: false,
+		// titleBarStyle: 'hidden',
+		// width: 800,
+		// height: 600,
+		// webPreferences: {
+		// 	webviewTag: true,
+		// 	nodeIntegration: true,
+		// },
+	});
+	win.loadURL('https://labs.perplexity.ai');
+	return new Promise((resolve, reject) => {
+		win.webContents.on('dom-ready', async () => {
+			await win.webContents.executeJavaScript(`{
+				var selectElement = document.querySelector('#lamma-select');
+				selectElement.value = 'llama-2-70b-chat';
+
+        var inputElement = document.querySelector('textarea[placeholder*="Ask"]'); // can be "Ask anything" or "Ask follow-up"
+				inputElement.focus();
+        var nativeTextAreaValueSetter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, "value").set;
+				nativeTextAreaValueSetter.call(inputElement, \`${prompt}\`);
+
+				var event = new Event('input', { bubbles: true});
+				inputElement.dispatchEvent(event);
+				var buttons = Array.from(document.querySelectorAll('button.bg-super'));
+				var buttonsWithSvgPath = buttons.filter(button => button.querySelector('svg path'));
+				var button = buttonsWithSvgPath[buttonsWithSvgPath.length - 1];
+				button.click();
+			}`);
+			await timeout(5000);
+			// const temp = await win.webContents.executeJavaScript(`
+			// [...document.querySelectorAll('.default.font-sans.text-base.text-textMain .prose')].map(x => x.innerHTML)
+			// `);
+			// console.log('temp', temp);
+			const responseHTML = await win.webContents.executeJavaScript(`
+			[...document.querySelectorAll('.default.font-sans.text-base.text-textMain .prose')].slice(-1)[0].innerHTML
+			`);
+			const responseText = await win.webContents.executeJavaScript(`
+			[...document.querySelectorAll('.default.font-sans.text-base.text-textMain .prose')].slice(-1)[0].innerText
+			`);
+			resolve({ responseHTML, responseText });
+			win.close();
+		});
+	});
+}
+ipcMain.on('prompt-llama2', async (event, val) => {
+	const response = await getLlamaResponse(val);
+	event.returnValue = response;
+});
+
 /*
  * Return the user's device platform (macOS, Windows, Linux) for use in
  * keyboard shortcuts and other platform-specific features in the renderer.

src/main/preload.ts

@@ -44,6 +44,10 @@ const electronHandler = {
 		setAlwaysOnTop(val: any) {
 			ipcRenderer.send('set-always-on-top', val);
 		},
+		promptLlama2(prompt: string) {
+			const response = ipcRenderer.sendSync('prompt-llama2', prompt);
+			return response;
+		},
 	},
 };
 

src/providers/perplexity-llama.js

@@ -53,6 +53,16 @@ class PerplexityLlama extends Provider {
           document.documentElement.classList.add('dark');
 				}`);
 				}, 100);
+				setTimeout(() => {
+					this.getWebview().executeJavaScript(`{
+          // pick llama 70b
+					var selectElement = document.querySelector('#lamma-select');
+					selectElement.value = 'llama-2-70b-chat';
+					// Dispatch the change event manually if there are any event listeners
+					var event = new Event('change');
+					selectElement.dispatchEvent(event);
+				}`);
+				}, 1000);
 			} catch (e) {
 				console.debug('Error in PerplexityLlama.handleCss():', e);
 			}

src/renderer/App.css

@@ -34,12 +34,32 @@ body {
 	-webkit-app-region: drag;
 }
 
+.vex-dialog-message ol {
+	all: revert; /* locally remove tailwind styles */
+}
+.vex.vex-theme-os .vex-content {
+	width: 90vw !important;
+}
+/* https://github.com/HubSpot/vex/issues/51 */
+.vex-theme-os .title-bar {
+	margin: -1em;
+	background: #ccc;
+	padding: 1em;
+	margin-bottom: 1em;
+	border-radius: 5px 5px 0 0;
+}
+.vex-theme-os .title-bar h1 {
+	font-size: 1.3em;
+	font-weight: normal;
+	line-height: 1.2em;
+	margin: 0;
+}
 .powerbar {
 	/* height: var(--powerbar-height) */
 	position: absolute;
 	z-index: 10;
 	left: calc(50% - 3rem);
-	@apply bg-white/50 rounded-b-lg;
+	@apply rounded-b-lg bg-white/50;
 }
 .powerbar:hover {
 	backdrop-filter: blur(10px);