2f:T404,function throttle(func, delay) { let lastExecutionTime = 0; let timer = null; let pendingCalls = []; const executeFunction = (resolve, reject, context, args) => { lastExecutionTime = Date.now(); Promise.resolve() .then(() => func.apply(context, args)) .then(resolve) .catch(reject); }; const scheduler = () => { const now = Date.now(); const nextExecutionTime = lastExecutionTime + delay; const waitTime = Math.max(nextExecutionTime - now, 0); if (waitTime <= 0 && pendingCalls.length > 0) { const [resolve, reject, context, args] = pendingCalls.shift(); executeFunction(resolve, reject, context, args); } if (pendingCalls.length > 0) { timer = setTimeout(scheduler, waitTime); } else { timer = null; } }; return function (...args) { return new Promise((resolve, reject) => { pendingCalls.push([resolve, reject, this, args]); if (!timer) { timer = setTimeout(scheduler, delay); } }); }; }30:T660,function TranslationForm({ inputText, onInputTextChange, sourceLanguage, onSourceLanguageChange, targetLanguages, onTargetLanguagesChange }) { const availableLanguages = ["en", "es", "de", "it", "fr", "tr"]; //const debouncedInputTextChange = debounce(onInputTextChange, 1500); // 500ms delay const handleTextChange = (event) => { onInputTextChange(event.target.value); }; const handleSourceLanguageChange = (event) => { onSourceLanguageChange(event.target.value); onTargetLanguagesChange( targetLanguages.filter((lang) => lang !== event.target.value) ); }; const handleTargetLanguageChange = (language, isChecked) => { const newTargetLanguages = isChecked ? [...targetLanguages, language] : targetLanguages.filter((lang) => lang !== language); onTargetLanguagesChange(newTargetLanguages); }; return jsx`

<br />
      <select value=${sourceLanguage} onChange=${handleSourceLanguageChange}>
        ${availableLanguages.map(
          (lang) => jsx`<option value=${lang}>${lang.toUpperCase()}</option>`
        )}
      </select>
      <br />
      ${availableLanguages
        .filter((lang) => lang !== sourceLanguage)
        .map(
          (lang) => jsx`
        <label>
          <input 
            type="checkbox" 
            checked=${targetLanguages.includes(lang)} 
            onChange=${(e) =>
              handleTargetLanguageChange(lang, e.target.checked)} 
          />
          ${lang.toUpperCase()}
        </label>
      `
        )}
    </div>
  `;
}31:T41f,function TranslationApp() {
  const [inputText, setInputText] = useState("Hello!");
  const [debouncedInputText, setDebouncedInputText] = useState(inputText);
  const [sourceLanguage, setSourceLanguage] = useState("en");
  const [targetLanguages, setTargetLanguages] = useState([
    "es",
    "de",
    "it",
    "fr"
  ]);

// Debounce input text
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedInputText(inputText);
    }, 500); // 500ms delay

return () => clearTimeout(timer);
  }, [inputText]);

return jsx`
    <div>
      <${TranslationForm} 
        inputText=${inputText} 
        onInputTextChange=${setInputText} 
        sourceLanguage=${sourceLanguage} 
        onSourceLanguageChange=${setSourceLanguage} 
        targetLanguages=${targetLanguages} 
        onTargetLanguagesChange=${setTargetLanguages} 
      />
      <${TranslationComponent} 
        textToTranslate=${debouncedInputText} 
        sourceLanguage=${sourceLanguage} 
        targetLanguages=${targetLanguages} 
      />
    </div>
  `;
}32:T7fe,async function cachedExpFetchTranslate(text, sourceLang, targetLang) {
  async function openDatabase() {
    return new Promise((resolve, reject) => {
      const request = indexedDB.open("TranslationCacheDB", 1);

request.onerror = (event) => {
        reject("IndexedDB error: ", event.target.errorCode);
      };

request.onupgradeneeded = (event) => {
        const db = event.target.result;
        db.createObjectStore("translations", { keyPath: "key" });
      };

request.onsuccess = (event) => {
        resolve(event.target.result);
      };
    });
  }

async function getCachedTranslation(db, key) {
    return new Promise((resolve, reject) => {
      const transaction = db.transaction(["translations"], "readonly");
      const store = transaction.objectStore("translations");
      const request = store.get(key);

request.onsuccess = (event) => {
        if (event.target.result) {
          resolve(event.target.result.translation);
        } else {
          resolve(null);
        }
      };

request.onerror = (event) => {
        reject("Error in retrieving from IndexedDB: ", event.target.errorCode);
      };
    });
  }

async function cacheTranslation(db, key, translation) {
    return new Promise((resolve, reject) => {
      const transaction = db.transaction(["translations"], "readwrite");
      const store = transaction.objectStore("translations");
      const request = store.put({ key, translation });

request.onsuccess = () => {
        resolve();
      };

request.onerror = (event) => {
        reject("Error in saving to IndexedDB: ", event.target.errorCode);
      };
    });
  }
  const db = await openDatabase();
  const key = `${text}-${sourceLang}-${targetLang}`;
  const cachedTranslation = await getCachedTranslation(db, key);

if (cachedTranslation) {
    return cachedTranslation;
  } else {
    const translation = await expFetchTranslate(text, sourceLang, targetLang);
    await cacheTranslation(db, key, translation);
    return translation;
  }
}33:[]
2d:{"title":"libretranslate test","cells":[{"id":0,"value":"# libretranslate test","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"render((_) => jsx`<${TranslationApp} />`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"async function translateText(text, sourceLang, targetLang) {\n  console.log(\"called to translate\", text, sourceLang, targetLang,Date.now());\n  const response = await fetch(\"https://libretranslate.de/translate\", {\n    method: \"POST\",\n    headers: { \"Content-Type\": \"application/json\" },\n    body: JSON.stringify({\n      q: text,\n      source: sourceLang,\n      target: targetLang\n    })\n  });\n\n  if (!response.ok) {\n    throw new Error(`HTTP error! status: ${response.status}`);\n  }\n\n  const data = await response.json();\n  return data.translatedText;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"function TranslationComponent({\n  textToTranslate,\n  sourceLanguage,\n  targetLanguages\n}) {\n  const [translations, setTranslations] = useState({});\n\n  useEffect(() => {\n    targetLanguages.forEach((lang) => {\n      cachedExpFetchTranslate(textToTranslate, sourceLanguage, lang).then(\n        (translation) => {\n          setTranslations((prevTranslations) => ({\n            ...prevTranslations,\n            [lang]: translation\n          }));\n        }\n      );\n    });\n  }, [textToTranslate, sourceLanguage, targetLanguages]);\n\n  return jsx`\n    <div>\n      <ul>\n        ${targetLanguages.map(\n          (lang) => jsx`\n          <li key=${lang}>${lang.toUpperCase()}: ${\n            translations[lang] || \"Loading...\"\n          }</li>\n        `\n        )}\n      </ul>\n    </div>\n  `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"throttledFetchTranslation = throttle(fetchTranslation, 300)","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"async function fetchTranslation(text, sourceLang, targetLang) {\n  console.log(\"called to translate\", text, sourceLang, targetLang, Date.now());\n  try {\n    const response = await fetch(\"https://libretranslate.de/translate\", {\n      method: \"POST\",\n      headers: { \"Content-Type\": \"application/json\" },\n      body: JSON.stringify({\n        q: text,\n        source: sourceLang,\n        target: targetLang\n      })\n    });\n\n    if (!response.ok) {\n      throw new Error(`HTTP error! status: ${response.status}`);\n    }\n\n    const data = await response.json();\n    return data.translatedText;\n  } catch (error) {\n    console.error(error);\n    return `Error: ${error.message}`;\n  }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"import {\n  render,\n  jsx,\n  component,\n  useState,\n  useEffect,\n  useRef\n} from \"@j-f1/react\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"function exponentialBackoffWrapper(\n  throttledFunc,\n  baseDelay = 5000,\n  maxDelay = 1200000\n) {\n  let currentDelay = baseDelay;\n\n  async function wrappedFunc(...args) {\n    while (true) {\n      try {\n        const result = await throttledFunc(...args);\n        console.log(\"giving result back\", result);\n        if (result == \"Error: HTTP error! status: 429\") {\n          throw { status: 429 };\n        }\n        currentDelay = baseDelay; // Reset delay after a successful call\n        return result;\n      } catch (error) {\n        if (error.status === 429) {\n          console.log(\"Retrying because of 429\");\n          if (currentDelay > maxDelay) {\n            throw new Error(\"Maximum wait time exceeded\");\n          }\n          await wait(currentDelay);\n          currentDelay *= 2; // Exponentially increase delay\n        } else {\n          throw error; // Rethrow other errors\n        }\n      }\n    }\n  }\n\n  return wrappedFunc;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"function debounce(func, delay) {\n  let timer;\n  return function (...args) {\n    clearTimeout(timer);\n    timer = setTimeout(() => {\n      func.apply(this, args);\n    }, delay);\n  };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"function wait(ms) {\n  return new Promise((resolve) => setTimeout(resolve, ms * Math.random()));\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"expFetchTranslate = exponentialBackoffWrapper(throttledFetchTranslation)","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"console.log(\"hi\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"throttle(() => Promise.resolve(\"hi\"), 0)()","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}
</article></body></html>