feat: dalle2 (#122)

src-tauri/src/assets/dalle2.core.js

@@ -0,0 +1,87 @@
+// *** Core Script - DALL·E 2 Core ***
+
+async function init() {
+  if (!window.FloatingUIDOM) return;
+
+  const styleDom = document.createElement('style');
+  styleDom.innerHTML = `
+  #chagpt-selection-menu {
+    display: none;
+    width: max-content;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #4a4a4a;
+    color: white;
+    font-weight: bold;
+    padding: 5px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+  }
+  `;
+  document.head.append(styleDom);
+
+  const selectionMenu = document.createElement('div');
+  selectionMenu.id = 'chagpt-selection-menu';
+  selectionMenu.innerHTML = 'DALL·E 2';
+  document.body.appendChild(selectionMenu);
+  const { computePosition, flip, offset, shift } = window.FloatingUIDOM;
+
+  document.body.addEventListener("mouseup", async (e) => {
+    const selection = window.getSelection();
+    if (window.__DALLE2_STATE__ !== 1) {
+      window.__DALLE2_CONTENT__ = selection.toString().trim();
+    }
+
+    if (e.target.id === 'chagpt-selection-menu') {
+      await invoke('dalle2_window', { query: encodeURIComponent(window.__DALLE2_CONTENT__) });
+    }
+
+    if (window.__DALLE2_STATE__ === 1) {
+      delete window.__DALLE2_STATE__;
+      delete window.__DALLE2_CONTENT__;
+    }
+
+    selectionMenu.style.display = 'none';
+    if (!window.__DALLE2_CONTENT__) return;
+
+    if (selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const rect = range.getClientRects()[0];
+
+      const rootEl = document.createElement('div');
+      rootEl.style.top = `${rect.top}px`;
+      rootEl.style.position = 'fixed';
+      rootEl.style.left = `${rect.left}px`;
+      document.body.appendChild(rootEl);
+
+      window.__DALLE2_STATE__ = 1;
+
+      selectionMenu.style.display = 'block';
+      computePosition(rootEl, selectionMenu, {
+        placement: 'top',
+        middleware: [
+          flip(),
+          offset(5),
+          shift({ padding: 5 })
+        ]
+      }).then(({x, y}) => {
+        Object.assign(selectionMenu.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    }
+  });
+
+}
+
+if (
+  document.readyState === "complete" ||
+  document.readyState === "interactive"
+) {
+  init();
+} else {
+  document.addEventListener("DOMContentLoaded", init);
+}

src-tauri/src/assets/dalle2.js

@@ -0,0 +1,34 @@
+// *** Core Script - DALL·E 2 ***
+
+async function init() {
+  if (window.searchInterval) {
+    clearInterval(window.searchInterval);
+  }
+
+  window.searchInterval = setInterval(() => {
+    // const searchForm = document.querySelector('.image-prompt-form-wrapper form');
+    // const searchBtn = document.querySelector('.image-prompt-form-wrapper form .image-prompt-btn');
+    const searchInput = document.querySelector('.image-prompt-form-wrapper form>.text-input');
+    if (searchInput) {
+      const query = decodeURIComponent(window.__CHATGPT_QUERY__);
+      searchInput.focus();
+      searchInput.value = query;
+      searchInput.setAttribute('value', query);
+      // searchInput.dispatchEvent(new CustomEvent('change'));
+      // searchForm.classList.add('focused');
+      // searchBtn.classList.add('active-style');
+      // searchBtn.removeAttribute('disabled');
+      // searchBtn.classList.remove('btn-disabled', 'btn-disabled-style');
+      clearInterval(window.searchInterval);
+    }
+  }, 200)
+}
+
+if (
+  document.readyState === "complete" ||
+  document.readyState === "interactive"
+) {
+  init();
+} else {
+  document.addEventListener("DOMContentLoaded", init);
+}