{"id":178490,"date":"2025-10-22T15:25:44","date_gmt":"2025-10-22T06:25:44","guid":{"rendered":"https:\/\/support.questetra.com\/?p=178490"},"modified":"2025-11-05T12:10:20","modified_gmt":"2025-11-05T03:10:20","slug":"qguide-request-to-openai-api-with-image-2025","status":"publish","type":"post","link":"https:\/\/support.questetra.com\/en\/deco\/qguide-request-to-openai-api-with-image-2025\/","title":{"rendered":"qGuide: Request to OpenAI API with Image"},"content":{"rendered":"\n<h4 class=\"wp-block-heading has-background\" style=\"background-color:#ffc69b;margin-top:var(--wp--preset--spacing--30);margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--20);padding-bottom:0;padding-left:var(--wp--preset--spacing--20)\"><strong>qGuide: Request to OpenAI API with Image<\/strong><\/h4>\n\n\n\n<p class=\"has-text-align-right has-background has-small-font-size mt-0 pt-0 wp-block-paragraph\" style=\"background-color:#ffc69b;margin-top:0;margin-right:0;margin-bottom:0;margin-left:0;padding-top:0;padding-right:var(--wp--preset--spacing--30);padding-bottom:0;padding-left:var(--wp--preset--spacing--30)\"><a href=\"https:\/\/support.questetra.com\/en\/deco-ja\/qguide-request-to-openai-api-with-image-2025\/\"><span class=\"material-icons\">translate<\/span> qGuide: OpenAI API \u306b\u753b\u50cf\u4ed8\u3067\u30ea\u30af\u30a8\u30b9\u30c8<\/a><\/p>\n\n\n\n<p class=\"has-background mt-0 pt-0 wp-block-paragraph\" style=\"background-color:#ffe5ce;margin-top:0;margin-right:0;margin-bottom:var(--wp--preset--spacing--60);margin-left:0;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--40)\">The &#8220;input file&#8221; (image or pdf), the &#8220;input data&#8221; string, and the &#8220;API key&#8221; are sent to the Responses API via CORS. The response (text generated by the model) is streamed on the Task Form screen. Depending on the prompt settings, various support functions (functions to assist the task processor) can be provided, such as &#8220;analyzing ancient documents,&#8221; &#8220;detecting fault locations,&#8221; &#8220;counting populations,&#8221; and &#8220;extracting RGB color codes.&#8221;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--60)\"><span style=\"text-decoration: underline;\">Input \/ Output<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u2190 FILES <code>q_inputFiles<\/code><\/li>\n\n\n\n<li>\u2192 <code>div#user_RadioPanel<\/code><\/li>\n\n\n\n<li>\u2190 STRING (STRING_TEXTFIELD) <code>q_input<\/code><\/li>\n\n\n\n<li>\u2190 STRING (STRING_TEXTFIELD) <code>q_instruction<\/code><\/li>\n\n\n\n<li>\u2190 STRING (STRING_TEXTFIELD) <code>q_openAiApiKey<\/code><\/li>\n\n\n\n<li>\u2192 <code>pre#user_result<\/code><\/li>\n\n\n\n<li>\u2192 <code>div#user_status<\/code><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--60)\"><span style=\"text-decoration: underline;\">Code Example<\/span><\/h3>\n\n\n\n<div class=\"wp-block-coblocks-accordion\">\n<div class=\"wp-block-coblocks-accordion-item\"><details open><summary class=\"wp-block-coblocks-accordion-item__title has-background\" style=\"background-color:#ffe5ce\">HTML\/JavaScript (click to close)<\/summary><div class=\"wp-block-coblocks-accordion-item__content\" style=\"border-color:#ffe5ce\">\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;style&gt;\n\/* AI\u547c\u3073\u51fa\u3057\u30dc\u30bf\u30f3 *\/\n.user_aiBtn {\n  border: 1px solid #ccc;\n  background-color: #fff;\n  padding: 6px 12px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 0.2s ease;\n  color: #333;\n  margin-right: 8px; \/* \u30dc\u30bf\u30f3\u9593\u306e\u4f59\u767d *\/\n  margin-bottom: 12px;\n}\n.user_aiBtn:hover {\n  background-color: #f0f0f0;\n  border-color: #bbb;\n}\n.user_aiBtn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background-color: #eee;\n}\n\n\/* \u7d50\u679c\u8868\u793a\u30a8\u30ea\u30a2 *\/\n#user_result {\n  background-color: #f9f9f9;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 12px;\n  min-height: 8em;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #222;\n  margin-top: 4px;\n}\n\n\/* \u30b9\u30c6\u30fc\u30bf\u30b9\u8868\u793a\u30a8\u30ea\u30a2 *\/\n#user_status {\n  font: 12px\/1.4 system-ui, sans-serif;\n  opacity: 0.75;\n  margin-top: 8px;\n  min-height: 1.4em;\n}\n\n\/* \u30bf\u30a4\u30d4\u30f3\u30b0\u30ab\u30fc\u30bd\u30eb\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n@keyframes blink {\n  50% { opacity: 0; }\n}\n.user_cursor {\n  display: inline-block;\n  width: 8px;\n  height: 1em;\n  background-color: #333;\n  margin-left: 2px;\n  animation: blink 1s step-end infinite;\n  vertical-align: text-bottom;\n}\n\n.user_aiBtn2 {\n  border: 1px solid #ccc;\n  background-color: #fff;\n  padding: 1px 2px;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 0.2s ease;\n  color: #999;\n  margin-right: 8px;\n  margin-bottom: 1px;\n}\n&lt;\/style&gt;\n\n\u25bd Input IMAGE\/FILE: &lt;button type=&#39;button&#39; onclick=&#39;user_noFileSelected()&#39; class=&#39;user_aiBtn2&#39;&gt;clear&lt;\/button&gt;\n&lt;div id=&quot;user_RadioPanel&quot;&gt;(no file attached ...)&lt;\/div&gt;\n\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-5-nano&lt;\/button&gt;\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-5-mini&lt;\/button&gt;\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-5&lt;\/button&gt;\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-5-codex&lt;\/button&gt;\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-4o&lt;\/button&gt;\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-4o-mini&lt;\/button&gt;\n\n&lt;pre id=&quot;user_result&quot;&gt;&lt;\/pre&gt;\n&lt;div id=&quot;user_status&quot;&gt;&lt;\/div&gt;\n\n\n\n&lt;script&gt;\nfunction user_noFileSelected() {\n const radios = document.querySelectorAll(&#39;input[type=&quot;radio&quot;][name=&quot;user_fileSelector&quot;]&#39;);\n radios.forEach(radio =&gt; { radio.checked = false; });\n}\n\nconst user_fieldFILES  = &#39;q_inputFiles&#39;;         \/\/ \u2605\u2605\u2605 EDIT FieldName \u2605\u2605\u2605\n\nqbpms.form.on(&#39;ready&#39;, () =&gt; {\n  user_refreshRadioPanel();\n  qbpms.form.on(&#39;change&#39;, user_fieldFILES, user_refreshRadioPanel);\n});\n\nfunction user_refreshRadioPanel () {\n const elRadioPanel = document.querySelector(&quot;#user_RadioPanel&quot;);\n while (elRadioPanel.firstChild) elRadioPanel.removeChild(elRadioPanel.firstChild);\n\n const files = qbpms.form.get(user_fieldFILES) || [];\n console.log(&#39;=== #of Files: &#39; + files.length + &#39; ===&#39;);\n if (files.length === 0) {\n  elRadioPanel.innerText = &#39;(No File Attached ...)&#39;;\n }\n\n files.forEach((file, i) =&gt; {\n  const elRadio = document.createElement(&#39;input&#39;);\n  elRadio.type = &#39;radio&#39;;\n  elRadio.id = `user_file_${i}`;\n  elRadio.name = &#39;user_fileSelector&#39;;\n  elRadio.value = String(i);\n  elRadio.dataset.qfileId = file.id;\n  elRadio.dataset.pdiId   = file.processDataInstanceId;\n  elRadio.dataset.contentType = file.contentType || &#39;application\/octet-stream&#39;;\n  elRadio.dataset.filename    = file.name || &#39;input.bin&#39;;\n  if (i === 0) elRadio.checked = true;\n\n  const elLabel = document.createElement(&#39;label&#39;);\n  elLabel.htmlFor = elRadio.id;\n  elLabel.style.cursor = &#39;pointer&#39;;\n  elLabel.style.marginRight = &#39;15px&#39;;\n  elLabel.appendChild(elRadio);\n  elLabel.appendChild(document.createTextNode(` ${file.name} (${file.contentType})`));\n  elRadioPanel.appendChild(elLabel);\n  elRadioPanel.appendChild(document.createElement(&quot;br&quot;));\n });\n\n}\n\n\/** Questetra context path:\n *  https:\/\/&lt;tenant&gt;.questetra.net  or  https:\/\/s.questetra.net\/&lt;8digits&gt;\n *\/\nfunction user_getQcontextPath () {\n  const re = \/https:\\\/\\\/[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9]\\.questetra\\.net|https:\\\/\\\/s\\.questetra\\.net\\\/\\d{8}\/;\n  const m = location.href.match(re);\n  if (!m) { console.error(&quot;DecorationError: Not Questetra BPM Suite URL&quot;); return null; }\n  return m[0];\n}\n\n\/** ArrayBuffer -&gt; Base64 *\/\nfunction user_arrayBufferToBase64(buffer) {\n let binary = &quot;&quot;;\n const bytes = new Uint8Array(buffer);\n const chunk = 0x8000; \/\/ 32KB\n for (let i = 0; i &lt; bytes.length; i += chunk) {\n   binary += String.fromCharCode.apply(null, bytes.subarray(i, i + chunk));\n }\n return btoa(binary);\n}\n\n\n\n\/\/ ========== \/v1\/responses \u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u5b9f\u884c ==========\n\nconst aiButtons = document.querySelectorAll(&quot;.user_aiBtn&quot;);\naiButtons.forEach(button =&gt; {\n button.addEventListener(&quot;click&quot;, async (event) =&gt; {\n  const strKey         = qbpms.form.get(&quot;q_openAiApiKey&quot;);       \/\/ \u2605\u2605\u2605 EDIT FieldName \u2605\u2605\u2605\n  const strInstruction = qbpms.form.get(&quot;q_instruction&quot;) || &quot;&quot;;  \/\/ \u2605\u2605\u2605 EDIT FieldName \u2605\u2605\u2605\n  const strInput       = qbpms.form.get(&quot;q_input&quot;);              \/\/ \u2605\u2605\u2605 EDIT FieldName \u2605\u2605\u2605\n\n  const resultEl = document.getElementById(&quot;user_result&quot;);\n  const statusEl = document.getElementById(&quot;user_status&quot;);\n  const modelName = event.currentTarget.innerText.trim();\n\n  if (!strKey || !strInput) {\n   statusEl.innerText = &quot;\u30a8\u30e9\u30fc: API\u30ad\u30fc\u3068\u5165\u529b\u5185\u5bb9\u306f\u5fc5\u9808\u3067\u3059\u3002&quot;;\n   resultEl.innerText = &quot;&quot;;\n   return;\n  }\n\n  aiButtons.forEach(btn =&gt; btn.disabled = true);\n  statusEl.innerText = &quot;\u6e96\u5099\u4e2d...&quot;;\n  resultEl.innerHTML = &#39;&lt;span class=&quot;user_cursor&quot;&gt;&lt;\/span&gt;&#39;;\n  const cursor = resultEl.querySelector(&quot;.user_cursor&quot;);\n\n  let streamDone = false;\n\n  try {\n   \/\/ --- \u6dfb\u4ed8\u30d5\u30a1\u30a4\u30eb\u306e\u6e96\u5099 ---\n   const selectedRadio = document.querySelector(&#39;input[name=&quot;user_fileSelector&quot;]:checked&#39;);\n   let contentParts = [{ type: &quot;input_text&quot;, text: String(strInput) }];\n\n   if (selectedRadio) {\n   const qctx = user_getQcontextPath();\n   if (!qctx) throw new Error(&quot;Questetra\u306e\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u30d1\u30b9\u304c\u53d6\u5f97\u3067\u304d\u307e\u305b\u3093\u3002&quot;);\n   const qfileId     = selectedRadio.dataset.qfileId;\n   const pdiId       = selectedRadio.dataset.pdiId;\n   const contentType = selectedRadio.dataset.contentType || &#39;application\/octet-stream&#39;;\n   const filename    = selectedRadio.dataset.filename || &#39;input.bin&#39;;\n   const fetchUrl = `${qctx}\/API\/OR\/ProcessInstance\/File\/download?id=${encodeURIComponent(qfileId)}&processDataInstanceId=${encodeURIComponent(pdiId)}`;\n   statusEl.innerText = `\u30d5\u30a1\u30a4\u30eb\u300c${filename}\u300d\u3092\u53d6\u5f97\u4e2d...`;\n   const dlRes = await fetch(fetchUrl, { credentials: &#39;same-origin&#39; });\n   if (!dlRes.ok) throw new Error(`\u30d5\u30a1\u30a4\u30eb\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u5931\u6557: ${dlRes.status}`);\n   const buf = await dlRes.arrayBuffer();\n\n   if (contentType.startsWith(&#39;image\/&#39;)) { \/\/ \u753b\u50cf\u306f Base64 data URL \u3067\u76f4\u63a5\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u542b\u3081\u308b\n   const base64 = user_arrayBufferToBase64(buf);\n   const dataUrl = `data:${contentType};base64,${base64}`;\n   contentParts.push({ type: &quot;input_image&quot;, image_url: dataUrl });\n   statusEl.innerText = &quot;\u753b\u50cf\u3092\u6dfb\u4ed8\u3057\u307e\u3057\u305f\u3002&quot;;\n\n   } else { \/\/ PDF\u3084Office\u6587\u66f8\u306a\u3069\u3001\u753b\u50cf\u4ee5\u5916\u306f Files API \u306b\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u3066ID\u3067\u53c2\u7167\u3059\u308b\n   statusEl.innerText = &quot;\u30d5\u30a1\u30a4\u30eb\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u4e2d...&quot;;\n   const formData = new FormData();\n   const blob = new Blob([new Uint8Array(buf)], { type: contentType });\n   \/\/ File\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u304c\u4f7f\u3048\u308b\u74b0\u5883\u3067\u306f\u3001\u30d5\u30a1\u30a4\u30eb\u540d\u3092\u6307\u5b9a\u3057\u3066\u4f5c\u6210\n   const fileObj = (typeof File !== &#39;undefined&#39;) ? new File([blob], filename, { type: contentType }) : blob;\n   formData.append(&quot;purpose&quot;, &quot;user_data&quot;);\n   formData.append(&quot;file&quot;, fileObj, filename);\n   const upRes = await fetch(&quot;https:\/\/api.openai.com\/v1\/files&quot;, {\n   method: &quot;POST&quot;,\n   headers: { &quot;Authorization&quot;: `Bearer ${strKey}` },\n   body: formData\n   });\n   if (!upRes.ok) {\n   let msg = `OpenAI File Upload Error: ${upRes.status}`;\n   try { msg += `\\n${JSON.stringify(await upRes.json(), null, 2)}`; } catch (_) {}\n   throw new Error(msg);\n   }\n   const upJson = await upRes.json();\n   const uploadedFileId = upJson.id; \/\/ \u4f8b: file_abc123\n   \/\/ \u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u3057\u305f\u30d5\u30a1\u30a4\u30eb\u306eID\u3092\u53c2\u7167\u3059\u308b\u5f62\u3067\u30ea\u30af\u30a8\u30b9\u30c8\u306b\u542b\u3081\u308b\n   contentParts.push({ type: &#39;input_file&#39;, file_id: uploadedFileId });\n   statusEl.innerText = &quot;\u30d5\u30a1\u30a4\u30eb\u3092\u6dfb\u4ed8\u3057\u307e\u3057\u305f\u3002&quot;;\n   }\n   }\n\n   \/\/ --- \/v1\/responses \u3067\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0 ---\n   statusEl.innerText = &quot;AI\u306b\u63a5\u7d9a\u4e2d...&quot;;\n   const res = await fetch(&quot;https:\/\/api.openai.com\/v1\/responses&quot;, { method: &quot;POST&quot;,\n   headers: { &quot;Content-Type&quot;: &quot;application\/json&quot;, &quot;Accept&quot;: &quot;text\/event-stream&quot;, &quot;Authorization&quot;: `Bearer ${strKey}` },\n   body: JSON.stringify({ model: modelName, instructions: strInstruction, input: [ { role: &quot;user&quot;, content: contentParts } ],\n   stream: true\n   })\n   });\n\n   if (!res.ok) {\n   let msg = `API Error: ${res.status}`;\n   try { msg += `\\n${JSON.stringify(await res.json(), null, 2)}`; } catch(_){}\n   throw new Error(msg);\n   }\n\n   statusEl.innerText = &quot;AI\u304c\u6587\u7ae0\u3092\u751f\u6210\u4e2d...&quot;;\n\n   \/\/ --- SSE (Responses API) ---\n   const reader  = res.body.getReader();\n   const decoder = new TextDecoder();\n   let buffer = &quot;&quot;;\n   let currentEvent = &quot;&quot;;\n\n   const flushLines = (chunkText) =&gt; {\n   buffer += chunkText;\n   const lines = buffer.split(\/\\r?\\n\/);\n   buffer = lines.pop() || &quot;&quot;;\n\n   for (const line of lines) {\n   if (!line.trim()) continue;\n   if (line.startsWith(&quot;event:&quot;)) {\n   currentEvent = line.replace(\/^event:\\s*\/, &quot;&quot;).trim();\n   continue;\n   }\n   if (line.startsWith(&quot;data:&quot;)) {\n   const dataRaw = line.replace(\/^data:\\s*\/, &quot;&quot;).trim();\n   if (dataRaw === &quot;[DONE]&quot;) { streamDone = true; return &quot;DONE&quot;; }\n   try {\n   const data = JSON.parse(dataRaw);\n   \/\/ \u9010\u6b21\u30c6\u30ad\u30b9\u30c8\n   if (currentEvent === &quot;response.output_text.delta&quot; && data.delta) {\n   cursor.insertAdjacentText(&quot;beforebegin&quot;, data.delta);\n   }\n   \/\/ \u5b8c\u4e86\n   if (currentEvent === &quot;response.completed&quot;) { streamDone = true; return &quot;DONE&quot;; }\n   \/\/ \u30a8\u30e9\u30fc\u30a4\u30d9\u30f3\u30c8\n   if (currentEvent === &quot;response.error&quot;) { throw new Error(data?.error?.message || &quot;Unknown streaming error&quot;); }\n   } catch (e) { console.error(&quot;SSE JSON parse error:&quot;, dataRaw, e); } } }\n   };\n\n   while (true) {\n   const { done, value } = await reader.read();\n   if (done) break;\n   const text = decoder.decode(value, { stream: true });\n   const status = flushLines(text);\n   if (status === &quot;DONE&quot;) break;\n   }\n\n   statusEl.innerText = &quot;\u751f\u6210\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002&quot;;\n\n  } catch (error) {\n   console.error(&quot;Request failed:&quot;, error);\n   statusEl.innerText = &quot;\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002&quot;;\n   resultEl.innerText = String(error.message || error);\n  } finally {\n   const c = document.querySelector(&quot;#user_result .user_cursor&quot;);\n   if (c) c.remove();\n   aiButtons.forEach(btn =&gt; btn.disabled = false);\n  }\n });\n});\n&lt;\/script&gt;<\/code><\/pre><\/div>\n<\/div><\/details><\/div>\n\n\n\n<div class=\"wp-block-coblocks-accordion-item\"><details><summary class=\"wp-block-coblocks-accordion-item__title has-background\" style=\"background-color:#ffe5ce\">HTML\/JavaScript Checkbox version (click to open)<\/summary><div class=\"wp-block-coblocks-accordion-item__content\" style=\"border-color:#ffe5ce\">\n<div class=\"hcb_wrap\"><pre class=\"prism line-numbers lang-html\" data-lang=\"HTML\"><code>&lt;style&gt;\n\/* AI\u547c\u3073\u51fa\u3057\u30dc\u30bf\u30f3 *\/\n.user_aiBtn {\n  border: 1px solid #ccc;\n  background-color: #fff;\n  padding: 6px 12px;\n  border-radius: 20px;\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 0.2s ease;\n  color: #333;\n  margin-right: 8px; \/* \u30dc\u30bf\u30f3\u9593\u306e\u4f59\u767d *\/\n  margin-bottom: 12px;\n}\n.user_aiBtn:hover {\n  background-color: #f0f0f0;\n  border-color: #bbb;\n}\n.user_aiBtn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n  background-color: #eee;\n}\n\n\/* \u7d50\u679c\u8868\u793a\u30a8\u30ea\u30a2 *\/\n#user_result {\n  background-color: #f9f9f9;\n  border: 1px solid #ddd;\n  border-radius: 4px;\n  padding: 12px;\n  min-height: 8em;\n  white-space: pre-wrap;\n  word-break: break-word;\n  font-family: Menlo, Monaco, Consolas, &quot;Courier New&quot;, monospace;\n  font-size: 14px;\n  line-height: 1.6;\n  color: #222;\n  margin-top: 4px;\n}\n\n\/* \u30b9\u30c6\u30fc\u30bf\u30b9\u8868\u793a\u30a8\u30ea\u30a2 *\/\n#user_status {\n  font: 12px\/1.4 system-ui, sans-serif;\n  opacity: 0.75;\n  margin-top: 8px;\n  min-height: 1.4em;\n}\n\n\/* \u30bf\u30a4\u30d4\u30f3\u30b0\u30ab\u30fc\u30bd\u30eb\u306e\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3 *\/\n@keyframes blink {\n  50% { opacity: 0; }\n}\n.user_cursor {\n  display: inline-block;\n  width: 8px;\n  height: 1em;\n  background-color: #333;\n  margin-left: 2px;\n  animation: blink 1s step-end infinite;\n  vertical-align: text-bottom;\n}\n\n.user_aiBtn2 {\n  border: 1px solid #ccc;\n  background-color: #fff;\n  padding: 1px 2px;\n  border-radius: 5px;\n  cursor: pointer;\n  font-size: 13px;\n  transition: all 0.2s ease;\n  color: #999;\n  margin-right: 8px;\n  margin-bottom: 1px;\n}\n&lt;\/style&gt;\n\n\u25bd Input IMAGE\/FILE: &lt;button type=&#39;button&#39; onclick=&#39;user_noFileSelected()&#39; class=&#39;user_aiBtn2&#39;&gt;clear&lt;\/button&gt;\n&lt;div id=&quot;user_CheckboxPanel&quot;&gt;(no file attached ...)&lt;\/div&gt;\n\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-5-nano&lt;\/button&gt;\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-5-mini&lt;\/button&gt;\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-5&lt;\/button&gt;\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-5-codex&lt;\/button&gt;\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-4o&lt;\/button&gt;\n&lt;button type=&quot;button&quot; class=&quot;user_aiBtn&quot;&gt;gpt-4o-mini&lt;\/button&gt;\n\n&lt;pre id=&quot;user_result&quot;&gt;&lt;\/pre&gt;\n&lt;div id=&quot;user_status&quot;&gt;&lt;\/div&gt;\n\n&lt;script&gt;\nfunction user_noFileSelected() {\n  const checkboxes = document.querySelectorAll(&#39;input[type=&quot;checkbox&quot;][name=&quot;user_fileSelector&quot;]&#39;);\n  checkboxes.forEach(cb =&gt; { cb.checked = false; });\n}\n\nconst user_fieldFILES = &#39;q_inputFiles&#39;; \/\/ \u2605\u2605\u2605 EDIT FieldName \u2605\u2605\u2605\n\nqbpms.form.on(&#39;ready&#39;, () =&gt; {\n  user_refreshCheckboxPanel();\n  qbpms.form.on(&#39;change&#39;, user_fieldFILES, user_refreshCheckboxPanel);\n});\n\nfunction user_refreshCheckboxPanel() {\n  const elPanel = document.querySelector(&quot;#user_CheckboxPanel&quot;);\n  while (elPanel.firstChild) elPanel.removeChild(elPanel.firstChild);\n\n  const files = qbpms.form.get(user_fieldFILES) || [];\n  console.log(&#39;=== #of Files: &#39; + files.length + &#39; ===&#39;);\n  if (files.length === 0) {\n    elPanel.innerText = &#39;(No File Attached ...)&#39;;\n    return;\n  }\n\n  files.forEach((file, i) =&gt; {\n    const elCb = document.createElement(&#39;input&#39;);\n    elCb.type = &#39;checkbox&#39;;\n    elCb.id = `user_file_${i}`;\n    elCb.name = &#39;user_fileSelector&#39;;\n    elCb.value = String(i);\n    elCb.dataset.qfileId = file.id;\n    elCb.dataset.pdiId = file.processDataInstanceId;\n    elCb.dataset.contentType = file.contentType || &#39;application\/octet-stream&#39;;\n    elCb.dataset.filename = file.name || &#39;input.bin&#39;;\n\n    const elLabel = document.createElement(&#39;label&#39;);\n    elLabel.htmlFor = elCb.id;\n    elLabel.style.cursor = &#39;pointer&#39;;\n    elLabel.style.marginRight = &#39;15px&#39;;\n    elLabel.appendChild(elCb);\n    elLabel.appendChild(document.createTextNode(` ${file.name} (${file.contentType})`));\n    elPanel.appendChild(elLabel);\n    elPanel.appendChild(document.createElement(&quot;br&quot;));\n  });\n}\n\n\/** Questetra context path *\/\nfunction user_getQcontextPath() {\n  const re = \/https:\\\/\\\/[a-zA-Z0-9][a-zA-Z0-9\\-]*[a-zA-Z0-9]\\.questetra\\.net|https:\\\/\\\/s\\.questetra\\.net\\\/\\d{8}\/;\n  const m = location.href.match(re);\n  if (!m) { console.error(&quot;DecorationError: Not Questetra BPM Suite URL&quot;); return null; }\n  return m[0];\n}\n\n\/** ArrayBuffer -&gt; Base64 *\/\nfunction user_arrayBufferToBase64(buffer) {\n  let binary = &quot;&quot;;\n  const bytes = new Uint8Array(buffer);\n  const chunk = 0x8000;\n  for (let i = 0; i &lt; bytes.length; i += chunk) {\n    binary += String.fromCharCode.apply(null, bytes.subarray(i, i + chunk));\n  }\n  return btoa(binary);\n}\n\nconst aiButtons = document.querySelectorAll(&quot;.user_aiBtn&quot;);\naiButtons.forEach(button =&gt; {\n  button.addEventListener(&quot;click&quot;, async (event) =&gt; {\n    const strKey = qbpms.form.get(&quot;q_openAiApiKey&quot;);\n    const strInstruction = qbpms.form.get(&quot;q_instruction&quot;) || &quot;&quot;;\n    const strInput = qbpms.form.get(&quot;q_input&quot;) || &quot;&quot;;\n\n    const resultEl = document.getElementById(&quot;user_result&quot;);\n    const statusEl = document.getElementById(&quot;user_status&quot;);\n    const modelName = event.currentTarget.innerText.trim();\n\n    if (!strKey || !strInput) {\n      statusEl.innerText = &quot;\u30a8\u30e9\u30fc: API\u30ad\u30fc\u3068\u5165\u529b\u5185\u5bb9\u306f\u5fc5\u9808\u3067\u3059\u3002&quot;;\n      resultEl.innerText = &quot;&quot;;\n      return;\n    }\n\n    aiButtons.forEach(btn =&gt; btn.disabled = true);\n    statusEl.innerText = &quot;\u6e96\u5099\u4e2d...&quot;;\n    resultEl.innerHTML = &#39;&lt;span class=&quot;user_cursor&quot;&gt;&lt;\/span&gt;&#39;;\n    const cursor = resultEl.querySelector(&quot;.user_cursor&quot;);\n\n    let streamDone = false;\n\n    try {\n      \/\/ --- \u6dfb\u4ed8\u30d5\u30a1\u30a4\u30eb\u306e\u6e96\u5099 ---\n      const selectedCheckboxes = Array.from(document.querySelectorAll(&#39;input[name=&quot;user_fileSelector&quot;]:checked&#39;));\n      let contentParts = [{ type: &quot;input_text&quot;, text: String(strInput) }];\n\n      for (const cb of selectedCheckboxes) {\n        const qctx = user_getQcontextPath();\n        if (!qctx) throw new Error(&quot;Questetra\u306e\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u30d1\u30b9\u304c\u53d6\u5f97\u3067\u304d\u307e\u305b\u3093\u3002&quot;);\n        const qfileId = cb.dataset.qfileId;\n        const pdiId = cb.dataset.pdiId;\n        const contentType = cb.dataset.contentType || &#39;application\/octet-stream&#39;;\n        const filename = cb.dataset.filename || &#39;input.bin&#39;;\n        const fetchUrl = `${qctx}\/API\/OR\/ProcessInstance\/File\/download?id=${encodeURIComponent(qfileId)}&processDataInstanceId=${encodeURIComponent(pdiId)}`;\n\n        statusEl.innerText = `\u30d5\u30a1\u30a4\u30eb\u300c${filename}\u300d\u3092\u53d6\u5f97\u4e2d...`;\n        const dlRes = await fetch(fetchUrl, { credentials: &#39;same-origin&#39; });\n        if (!dlRes.ok) throw new Error(`\u30d5\u30a1\u30a4\u30eb\u306e\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u5931\u6557: ${dlRes.status}`);\n        const buf = await dlRes.arrayBuffer();\n\n        if (contentType.startsWith(&#39;image\/&#39;)) {\n          const base64 = user_arrayBufferToBase64(buf);\n          const dataUrl = `data:${contentType};base64,${base64}`;\n          contentParts.push({ type: &quot;input_image&quot;, image_url: dataUrl });\n        } else {\n          statusEl.innerText = `\u30d5\u30a1\u30a4\u30eb\u300c${filename}\u300d\u3092\u30a2\u30c3\u30d7\u30ed\u30fc\u30c9\u4e2d...`;\n          const formData = new FormData();\n          const blob = new Blob([new Uint8Array(buf)], { type: contentType });\n          const fileObj = (typeof File !== &#39;undefined&#39;) ? new File([blob], filename, { type: contentType }) : blob;\n          formData.append(&quot;purpose&quot;, &quot;user_data&quot;);\n          formData.append(&quot;file&quot;, fileObj, filename);\n          const upRes = await fetch(&quot;https:\/\/api.openai.com\/v1\/files&quot;, {\n            method: &quot;POST&quot;,\n            headers: { &quot;Authorization&quot;: `Bearer ${strKey}` },\n            body: formData\n          });\n          if (!upRes.ok) {\n            let msg = `OpenAI File Upload Error: ${upRes.status}`;\n            try { msg += `\\n${JSON.stringify(await upRes.json(), null, 2)}`; } catch (_) {}\n            throw new Error(msg);\n          }\n          const upJson = await upRes.json();\n          contentParts.push({ type: &#39;input_file&#39;, file_id: upJson.id });\n        }\n      }\n\n      statusEl.innerText = &quot;AI\u306b\u63a5\u7d9a\u4e2d...&quot;;\n      const res = await fetch(&quot;https:\/\/api.openai.com\/v1\/responses&quot;, {\n        method: &quot;POST&quot;,\n        headers: {\n          &quot;Content-Type&quot;: &quot;application\/json&quot;,\n          &quot;Accept&quot;: &quot;text\/event-stream&quot;,\n          &quot;Authorization&quot;: `Bearer ${strKey}`\n        },\n        body: JSON.stringify({\n          model: modelName,\n          instructions: strInstruction,\n          input: [{ role: &quot;user&quot;, content: contentParts }],\n          stream: true\n        })\n      });\n\n      if (!res.ok) {\n        let msg = `API Error: ${res.status}`;\n        try { msg += `\\n${JSON.stringify(await res.json(), null, 2)}`; } catch (_) {}\n        throw new Error(msg);\n      }\n\n      statusEl.innerText = &quot;AI\u304c\u6587\u7ae0\u3092\u751f\u6210\u4e2d...&quot;;\n\n      const reader = res.body.getReader();\n      const decoder = new TextDecoder();\n      let buffer = &quot;&quot;;\n      let currentEvent = &quot;&quot;;\n\n      const flushLines = (chunkText) =&gt; {\n        buffer += chunkText;\n        const lines = buffer.split(\/\\r?\\n\/);\n        buffer = lines.pop() || &quot;&quot;;\n        for (const line of lines) {\n          if (!line.trim()) continue;\n          if (line.startsWith(&quot;event:&quot;)) {\n            currentEvent = line.replace(\/^event:\\s*\/, &quot;&quot;).trim();\n            continue;\n          }\n          if (line.startsWith(&quot;data:&quot;)) {\n            const dataRaw = line.replace(\/^data:\\s*\/, &quot;&quot;).trim();\n            if (dataRaw === &quot;[DONE]&quot;) { streamDone = true; return &quot;DONE&quot;; }\n            try {\n              const data = JSON.parse(dataRaw);\n              if (currentEvent === &quot;response.output_text.delta&quot; && data.delta) {\n                cursor.insertAdjacentText(&quot;beforebegin&quot;, data.delta);\n              }\n              if (currentEvent === &quot;response.completed&quot;) { streamDone = true; return &quot;DONE&quot;; }\n              if (currentEvent === &quot;response.error&quot;) { throw new Error(data?.error?.message || &quot;Unknown streaming error&quot;); }\n            } catch (e) { console.error(&quot;SSE JSON parse error:&quot;, dataRaw, e); }\n          }\n        }\n      };\n\n      while (true) {\n        const { done, value } = await reader.read();\n        if (done) break;\n        const text = decoder.decode(value, { stream: true });\n        const status = flushLines(text);\n        if (status === &quot;DONE&quot;) break;\n      }\n\n      statusEl.innerText = &quot;\u751f\u6210\u304c\u5b8c\u4e86\u3057\u307e\u3057\u305f\u3002&quot;;\n\n    } catch (error) {\n      console.error(&quot;Request failed:&quot;, error);\n      statusEl.innerText = &quot;\u30a8\u30e9\u30fc\u304c\u767a\u751f\u3057\u307e\u3057\u305f\u3002&quot;;\n      resultEl.innerText = String(error.message || error);\n    } finally {\n      const c = document.querySelector(&quot;#user_result .user_cursor&quot;);\n      if (c) c.remove();\n      aiButtons.forEach(btn =&gt; btn.disabled = false);\n    }\n  });\n});\n&lt;\/script&gt;\n<\/code><\/pre><\/div>\n<\/div><\/details><\/div>\n<\/div>\n\n\n\n<div class=\"has-small-font-size\" style=\"text-align: right;\"><div style=\"display: inline-block; background: #FBE7DD; text-align: center;\">\n<span class=\"material-icons\">warning<\/span> Freely modifiable HTML\/JavaScript code, MIT License. No warranty of any kind.<br>\n(<em><strong>Decoration using JavaScript<\/strong><\/em> is only available in the <em><strong><span style=\"color: #1970B9\">Professional<\/span><\/strong><\/em> edition: <a href=\"https:\/\/questetra.zendesk.com\/hc\/en-us\/articles\/360002245252-M213\">M213<\/a>)\n<\/div><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--60)\"><span style=\"text-decoration: underline;\">Capture<\/span><\/h3>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a47f049d9838&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a47f049d9838\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"628\" data-attachment-id=\"178495\" data-permalink=\"https:\/\/support.questetra.com\/en\/deco\/qguide-request-to-openai-api-with-image-2025\/attachment\/qguide-request-to-openai-api-with-image-2025-en\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?fit=1200%2C628&amp;ssl=1\" data-orig-size=\"1200,628\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"qguide-request-to-openai-api-with-image-2025-en\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?fit=1024%2C536&amp;ssl=1\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=1200%2C628&#038;ssl=1\" alt=\"\" class=\"wp-image-178495\" srcset=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?w=1200&amp;ssl=1 1200w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=600%2C315&amp;ssl=1 600w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=1024%2C536&amp;ssl=1 1024w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=768%2C402&amp;ssl=1 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a47f049d9f77&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a47f049d9f77\" class=\"wp-block-image size-large has-lightbox wp-lightbox-container\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"621\" data-attachment-id=\"178498\" data-permalink=\"https:\/\/support.questetra.com\/en\/deco\/qguide-request-to-openai-api-with-image-2025\/attachment\/deco-openai-api-image\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image.png?fit=2033%2C1233&amp;ssl=1\" data-orig-size=\"2033,1233\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"deco-openai-api-image\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image.png?fit=1024%2C621&amp;ssl=1\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image.png?resize=1024%2C621&#038;ssl=1\" alt=\"\" class=\"wp-image-178498\" srcset=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image.png?resize=1024%2C621&amp;ssl=1 1024w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image.png?resize=519%2C315&amp;ssl=1 519w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image.png?resize=768%2C466&amp;ssl=1 768w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image.png?resize=1536%2C932&amp;ssl=1 1536w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image.png?resize=1200%2C728&amp;ssl=1 1200w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image.png?w=2033&amp;ssl=1 2033w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a47f049da5ba&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a47f049da5ba\" class=\"wp-block-image size-large has-lightbox wp-lightbox-container\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"863\" height=\"630\" data-attachment-id=\"178501\" data-permalink=\"https:\/\/support.questetra.com\/en\/deco\/qguide-request-to-openai-api-with-image-2025\/attachment\/deco-openai-api-image-location3\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image-location3.png?fit=1465%2C1070&amp;ssl=1\" data-orig-size=\"1465,1070\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"deco-openai-api-image-location3\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image-location3.png?fit=863%2C630&amp;ssl=1\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image-location3.png?resize=863%2C630&#038;ssl=1\" alt=\"\" class=\"wp-image-178501\" srcset=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image-location3.png?resize=863%2C630&amp;ssl=1 863w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image-location3.png?resize=431%2C315&amp;ssl=1 431w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image-location3.png?resize=768%2C561&amp;ssl=1 768w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image-location3.png?resize=1200%2C876&amp;ssl=1 1200w, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-openai-api-image-location3.png?w=1465&amp;ssl=1 1465w\" sizes=\"auto, (max-width: 863px) 100vw, 863px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1208\" height=\"720\" data-attachment-id=\"178759\" data-permalink=\"https:\/\/support.questetra.com\/en\/deco\/qguide-request-to-openai-api-with-image-2025\/attachment\/deco-j2e-translation\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-j2e-translation.gif?fit=1208%2C720&amp;ssl=1\" data-orig-size=\"1208,720\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"deco-j2e-translation\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-j2e-translation.gif?fit=1024%2C610&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-j2e-translation.gif?resize=1208%2C720&#038;ssl=1\" alt=\"\" class=\"wp-image-178759\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1208\" height=\"720\" data-attachment-id=\"178762\" data-permalink=\"https:\/\/support.questetra.com\/en\/deco\/qguide-request-to-openai-api-with-image-2025\/attachment\/deco-wording-diff\/\" data-orig-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-wording-diff.gif?fit=1208%2C720&amp;ssl=1\" data-orig-size=\"1208,720\" data-comments-opened=\"0\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"deco-wording-diff\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-wording-diff.gif?fit=1024%2C610&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/deco-wording-diff.gif?resize=1208%2C720&#038;ssl=1\" alt=\"\" class=\"wp-image-178762\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" style=\"margin-top:var(--wp--preset--spacing--60)\"><span style=\"text-decoration: underline;\">See Also<\/span><\/h3>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-questetra-support wp-block-embed-questetra-support\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"AphJIGuzmu\"><a href=\"https:\/\/support.questetra.com\/en\/deco\/qguide-request-to-openai-api-2025\/\">qGuide: Request to OpenAI API<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;qGuide: Request to OpenAI API&#8221; &#8212; Questetra Support\" src=\"https:\/\/support.questetra.com\/deco\/qguide-request-to-openai-api-2025\/embed\/#?secret=OiKqxMGGtg#?secret=AphJIGuzmu\" data-secret=\"AphJIGuzmu\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>The &#8220;input file&#8221; (image or pdf), the &#8220;input data&#8221; string, and the &#8220;API key&#8221; are sent to the Responses API via CORS. The response (text generated by the model) is streamed on the Task Form screen. Depending on the prompt settings, various support functions (functions to assist the task processor) can be provided, such as &#8220;analyzing ancient documents,&#8221; &#8220;detecting fault locations,&#8221; &#8220;counting populations,&#8221; and &#8220;extracting RGB color codes.&#8221;<\/p>\n","protected":false},"author":2,"featured_media":178495,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_uag_custom_page_level_css":"","advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_seo_schema_type":"","_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_wpcom_ai_launchpad_first_post":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"{title}\n\n{excerpt}\n\n{url}","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[3439],"tags":[],"class_list":["post-178490","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-deco"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?fit=1200%2C628&ssl=1","uagb_featured_image_src":{"full":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?fit=1200%2C628&ssl=1",1200,628,false],"thumbnail":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=440%2C440&ssl=1",440,440,true],"medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?fit=600%2C315&ssl=1",600,315,true],"medium_large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?fit=768%2C402&ssl=1",768,402,true],"large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?fit=1024%2C536&ssl=1",1024,536,true],"1536x1536":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?fit=1200%2C628&ssl=1",1200,628,true],"2048x2048":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?fit=1200%2C628&ssl=1",1200,628,true],"newspack-article-block-landscape-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=1200%2C628&ssl=1",1200,628,true],"newspack-article-block-portrait-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=900%2C628&ssl=1",900,628,true],"newspack-article-block-square-large":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=1200%2C628&ssl=1",1200,628,true],"newspack-article-block-landscape-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=800%2C600&ssl=1",800,600,true],"newspack-article-block-portrait-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=600%2C628&ssl=1",600,628,true],"newspack-article-block-square-medium":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=800%2C628&ssl=1",800,628,true],"newspack-article-block-landscape-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=600%2C450&ssl=1",600,450,true],"newspack-article-block-portrait-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=450%2C600&ssl=1",450,600,true],"newspack-article-block-square-intermediate":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=600%2C600&ssl=1",600,600,true],"newspack-article-block-landscape-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=400%2C300&ssl=1",400,300,true],"newspack-article-block-portrait-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=300%2C400&ssl=1",300,400,true],"newspack-article-block-square-small":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=400%2C400&ssl=1",400,400,true],"newspack-article-block-landscape-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=200%2C150&ssl=1",200,150,true],"newspack-article-block-portrait-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=150%2C200&ssl=1",150,200,true],"newspack-article-block-square-tiny":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?resize=200%2C200&ssl=1",200,200,true],"newspack-article-block-uncropped":["https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qguide-request-to-openai-api-with-image-2025-en.png?fit=1200%2C628&ssl=1",1200,628,true]},"uagb_author_info":{"display_name":"IMAMURA, Genichi","author_link":"https:\/\/support.questetra.com\/en\/author\/imamuragenichi\/"},"uagb_comment_info":2,"uagb_excerpt":"The \"input file\" (image or pdf), the \"input data\" string, and the \"API key\" are sent to the Responses API via CORS. The response (text generated by the model) is streamed on the Task Form screen. Depending on the prompt settings, various support functions (functions to assist the task processor) can be provided, such as&hellip;","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9DiIh-KqS","jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":182066,"url":"https:\/\/support.questetra.com\/en\/deco\/qguide-request-to-openai-api-using-localstorage-2026\/","url_meta":{"origin":178490,"position":0},"title":"qGuide: Request to OpenAI API using localStorage","author":"IMAMURA, Genichi","date":"2026-04-02","format":false,"excerpt":"Sends the Input-string to the Responses API via CORS. The responses (the sentence generated by the model) will be displayed in streaming format. Depending on the prompt settings, various support functions to assist task operators can be provided, such as a typo check function, a text rewrite function, and a\u2026","rel":"","context":"In &quot;Task Form Decoration&quot;","block_context":{"text":"Task Form Decoration","link":"https:\/\/support.questetra.com\/en\/category\/deco\/"},"img":{"alt_text":"qGuide: Request to OpenAI API using localStorage","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/04\/deco-Request-to-OpenAI-API-using-localStorage-en.png?fit=1200%2C628&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/04\/deco-Request-to-OpenAI-API-using-localStorage-en.png?fit=1200%2C628&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/04\/deco-Request-to-OpenAI-API-using-localStorage-en.png?fit=1200%2C628&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/04\/deco-Request-to-OpenAI-API-using-localStorage-en.png?fit=1200%2C628&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/04\/deco-Request-to-OpenAI-API-using-localStorage-en.png?fit=1200%2C628&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":178040,"url":"https:\/\/support.questetra.com\/en\/deco\/qguide-request-to-openai-api-2025\/","url_meta":{"origin":178490,"position":1},"title":"qGuide: Request to OpenAI API","author":"IMAMURA, Genichi","date":"2025-09-29","format":false,"excerpt":"Send the Input-string and ApiKey-string to the Responses API via CORS. The responses (the sentence generated by the model) will be displayed in streaming format. Depending on the prompt settings, various support functions to assist task operators can be provided, such as a typo check function, a text rewrite function,\u2026","rel":"","context":"In &quot;Task Form Decoration&quot;","block_context":{"text":"Task Form Decoration","link":"https:\/\/support.questetra.com\/en\/category\/deco\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/09\/qGuide-Request-to-OpenAI-API-en.png?fit=1200%2C628&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/09\/qGuide-Request-to-OpenAI-API-en.png?fit=1200%2C628&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/09\/qGuide-Request-to-OpenAI-API-en.png?fit=1200%2C628&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/09\/qGuide-Request-to-OpenAI-API-en.png?fit=1200%2C628&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/09\/qGuide-Request-to-OpenAI-API-en.png?fit=1200%2C628&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":178399,"url":"https:\/\/support.questetra.com\/ja\/deco-ja\/qguide-request-to-azure-openai-service-api-2025\/","url_meta":{"origin":178490,"position":2},"title":"qGuide: Azure OpenAI Service API \u306b\u30ea\u30af\u30a8\u30b9\u30c8","author":"Tsuyoshi Kusaka","date":"2025-10-16","format":false,"excerpt":"\u6587\u5b57\u5217 \"\u6295\u5165\u30c7\u30fc\u30bf\"\u30fb\"API\u30ad\u30fc\"\u30fb\"\u30ea\u30bd\u30fc\u30b9\u540d\"\u30fb\"\u30c7\u30d7\u30ed\u30a4ID\"\u30fb\"API\u30d0\u30fc\u30b8\u30e7\u30f3\" \u3092 Azure OpenAI Service API \u306b CORS \u9001\u4fe1\u3057\u307e\u3059\u3002\u30ec\u30b9\u30dd\u30f3\u30b9\uff08\u30e2\u30c7\u30eb\u304c\u751f\u6210\u3057\u305f\u6587\u7ae0\uff09\u306f\u3001\u30bf\u30b9\u30af\u51e6\u7406\u753b\u9762\u4e0a\u3067\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u30d7\u30ed\u30f3\u30d7\u30c8\u8a2d\u5b9a\u6b21\u7b2c\u3067\u3001\u300c\u8aa4\u690d\u30c1\u30a7\u30c3\u30af\u6a5f\u80fd\u300d\u300c\u6587\u7ae0\u30ea\u30e9\u30a4\u30c8\u6a5f\u80fd\u300d\u300c\u5dee\u623b\u7406\u7531\u306e\u5019\u88dc\u5217\u6319\u6a5f\u80fd\u300d\u3068\u3044\u3063\u305f\u69d8\u3005\u306a\u652f\u63f4\u6a5f\u80fd\uff08\u30bf\u30b9\u30af\u51e6\u7406\u8005\u3092\u652f\u63f4\u3059\u308b\u6a5f\u80fd\uff09\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002","rel":"","context":"In &quot;\u51e6\u7406\u753b\u9762\u30c7\u30b3\u30ec\u30fc\u30b7\u30e7\u30f3&quot;","block_context":{"text":"\u51e6\u7406\u753b\u9762\u30c7\u30b3\u30ec\u30fc\u30b7\u30e7\u30f3","link":"https:\/\/support.questetra.com\/ja\/category\/deco-ja\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qGuide-Request-to-AOAI-API-ja-eyecatch2.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qGuide-Request-to-AOAI-API-ja-eyecatch2.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qGuide-Request-to-AOAI-API-ja-eyecatch2.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qGuide-Request-to-AOAI-API-ja-eyecatch2.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2025\/10\/qGuide-Request-to-AOAI-API-ja-eyecatch2.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":70010,"url":"https:\/\/support.questetra.com\/en\/developer-blog\/receive-task-webhook-twilio\/","url_meta":{"origin":178490,"position":3},"title":"Automatically Making a Phone Call in the Middle of a Workflow","author":"HatanakaAkihiro","date":"2018-06-26","format":false,"excerpt":"Making a phone call automatically in the middle of the Workflow by using the new function of v11.7, \"Receive Task (Webhook): Correspond so that content of HTTP response can be configured\" and Twilio in combination.","rel":"","context":"In &quot;Questetra Developers Blog&quot;","block_context":{"text":"Questetra Developers Blog","link":"https:\/\/support.questetra.com\/en\/category\/developer-blog\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/06\/receive-task-webhook-twilio-1200x675-1.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/06\/receive-task-webhook-twilio-1200x675-1.png?fit=1200%2C675&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/06\/receive-task-webhook-twilio-1200x675-1.png?fit=1200%2C675&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/06\/receive-task-webhook-twilio-1200x675-1.png?fit=1200%2C675&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2018\/06\/receive-task-webhook-twilio-1200x675-1.png?fit=1200%2C675&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":182096,"url":"https:\/\/support.questetra.com\/ja\/deco-ja\/qguide-request-to-openai-api-using-localstorage-2026\/","url_meta":{"origin":178490,"position":4},"title":"qGuide: OpenAI API \u306b\u30ea\u30af\u30a8\u30b9\u30c8 (localStorage\u7248)","author":"IMAMURA, Genichi","date":"2026-04-02","format":false,"excerpt":"\u6587\u5b57\u5217 \"\u6295\u5165\u30c7\u30fc\u30bf\" \u3092 Responses API \u306b CORS \u9001\u4fe1\u3057\u307e\u3059\u3002\u30ec\u30b9\u30dd\u30f3\u30b9\uff08\u30e2\u30c7\u30eb\u304c\u751f\u6210\u3057\u305f\u6587\u7ae0\uff09\u306f\u3001\u30bf\u30b9\u30af\u51e6\u7406\u753b\u9762\u4e0a\u3067\u30b9\u30c8\u30ea\u30fc\u30df\u30f3\u30b0\u8868\u793a\u3055\u308c\u307e\u3059\u3002\u30d7\u30ed\u30f3\u30d7\u30c8\u8a2d\u5b9a\u6b21\u7b2c\u3067\u3001\u300c\u8aa4\u690d\u30c1\u30a7\u30c3\u30af\u6a5f\u80fd\u300d\u300c\u6587\u7ae0\u30ea\u30e9\u30a4\u30c8\u6a5f\u80fd\u300d\u300c\u5dee\u623b\u7406\u7531\u306e\u5019\u88dc\u5217\u6319\u6a5f\u80fd\u300d\u3068\u3044\u3063\u305f\u69d8\u3005\u306a\u652f\u63f4\u6a5f\u80fd\uff08\u30bf\u30b9\u30af\u51e6\u7406\u8005\u3092\u652f\u63f4\u3059\u308b\u6a5f\u80fd\uff09\u3092\u63d0\u4f9b\u3059\u308b\u3053\u3068\u304c\u53ef\u80fd\u3067\u3059\u3002\"API\u30ad\u30fc\" \u3068 \"\u6307\u793a\u6587\" \u306f\u3001\u305d\u308c\u305e\u308c\u306e\u30e6\u30fc\u30b6\u304c localStorage \u306b\u4fdd\u5b58\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002","rel":"","context":"In &quot;\u51e6\u7406\u753b\u9762\u30c7\u30b3\u30ec\u30fc\u30b7\u30e7\u30f3&quot;","block_context":{"text":"\u51e6\u7406\u753b\u9762\u30c7\u30b3\u30ec\u30fc\u30b7\u30e7\u30f3","link":"https:\/\/support.questetra.com\/ja\/category\/deco-ja\/"},"img":{"alt_text":"qGuide: OpenAI API \u306b\u30ea\u30af\u30a8\u30b9\u30c8 (localStorage\u7248)","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/04\/deco-Request-to-OpenAI-API-using-localStorage-ja.png?fit=1200%2C628&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/04\/deco-Request-to-OpenAI-API-using-localStorage-ja.png?fit=1200%2C628&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/04\/deco-Request-to-OpenAI-API-using-localStorage-ja.png?fit=1200%2C628&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/04\/deco-Request-to-OpenAI-API-using-localStorage-ja.png?fit=1200%2C628&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/04\/deco-Request-to-OpenAI-API-using-localStorage-ja.png?fit=1200%2C628&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":188355,"url":"https:\/\/support.questetra.com\/en\/deco\/qguide-request-to-openai-api-using-localstorage-202606\/","url_meta":{"origin":178490,"position":5},"title":"qGuide: Request to OpenAI API using localStorage v202606","author":"IMAMURA, Genichi","date":"2026-07-01","format":false,"excerpt":"Sends the text and file information stored in specified data fields to the Responses API via CORS. The responses (the sentence generated by the model) will be displayed in streaming format. Depending on the prompt settings, various support functions to assist task operators can be provided, such as a typo\u2026","rel":"","context":"In &quot;Task Form Decoration&quot;","block_context":{"text":"Task Form Decoration","link":"https:\/\/support.questetra.com\/en\/category\/deco\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/07\/qguide-request-to-openai-api-using-localstorage-202606-en.png?fit=1200%2C628&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/07\/qguide-request-to-openai-api-using-localstorage-202606-en.png?fit=1200%2C628&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/07\/qguide-request-to-openai-api-using-localstorage-202606-en.png?fit=1200%2C628&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/07\/qguide-request-to-openai-api-using-localstorage-202606-en.png?fit=1200%2C628&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/support.questetra.com\/wp-content\/uploads\/2026\/07\/qguide-request-to-openai-api-using-localstorage-202606-en.png?fit=1200%2C628&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"amp_enabled":false,"_links":{"self":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/178490","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/comments?post=178490"}],"version-history":[{"count":14,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/178490\/revisions"}],"predecessor-version":[{"id":178831,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/posts\/178490\/revisions\/178831"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/media\/178495"}],"wp:attachment":[{"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/media?parent=178490"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/categories?post=178490"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/support.questetra.com\/en\/wp-json\/wp\/v2\/tags?post=178490"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}