Intergrate Open AI with FlexiShop

1. Add OpenAI settings

In FlexiShop → Settings, keep these fields:

  • Enable OpenAI
  • OpenAI API key
  • OpenAI model
  • Optimization prompt
  • New toggle: Use uploaded images in optimization

2. Decide which fields should use image input

Use image-aware optimization only for fields where a photo helps:

  • Accessories Received
  • Physical Condition
  • Problem Description
  • Engineer Comments

That means when a user clicks Optimize with OpenAI, your module should send:

  • the current textarea content
  • the selected field name
  • the uploaded repair image, if one exists

3. Reuse the existing repair image

Your module already stores a repair image. On optimize:

  • look up the repair job image path
  • build either a public URL to that image, or
  • upload the image to OpenAI Files first, then reference it in the request

OpenAI supports uploaded files through the Files API, and the Responses API supports image input alongside text input.

4. Send a combined text + image request

Use the Responses API, not the old chat pattern. Your request should include:

  • one text instruction
  • one image input
  • optional extra context like job number, device type, or status

Use a prompt like this:

You are improving a repair workshop note.

Field: Physical Condition
Rules:
- Preserve facts exactly
- Do not invent missing details
- Keep it concise and professional
- Use the uploaded image as supporting context
- Return only the improved note text

Then append the original note text underneath. The Responses API is designed to accept text and image inputs together.

5. Example request structure

For PHP, the request body should follow the Responses API format conceptually like this:

{
"model": "YOUR_MODEL",
"input": [
{
"role": "user",
"content": [
{
"type": "input_text",
"text": "Your optimization prompt plus the raw note text"
},
{
"type": "input_image",
"image_url": "https://your-site.com/path/to/repair-image.jpg"
}
]
}
]
}

If the image is not publicly reachable, upload it first with the Files API and then reference it in your workflow.

6. Populate the textarea with the returned text

When the response comes back:

  • read the generated text
  • replace the existing textarea content
  • do not auto-save yet
  • let the user review and save manually

That gives staff control and avoids overwriting notes without approval.

7. Add fallback behavior

You should handle three cases:

  • No image uploaded → optimize using text only
  • Image exists → optimize using text + image
  • OpenAI fails → keep original text and show an error message

This keeps the feature usable even when a job has no photos.

8. Best UX for the button

For each supported field:

  • show Optimize with OpenAI
  • if image mode is enabled and an image exists, label can be:
    • Optimize with OpenAI + Image
  • if no image exists, use normal text optimization

That makes it clear why results may vary.

9. Recommended logic in FlexiShop

A practical flow for your module is:

  • user uploads/has repair image
  • user types rough note
  • clicks optimize
  • backend checks:
    • is OpenAI enabled?
    • is image mode enabled?
    • does this repair job have an image?
  • backend sends text-only or text+image request
  • optimized text is returned to the same field

10. Good fields for image context

Use the image especially for:

  • Accessories Received: charger, case, stylus, cable, SIM tray
  • Physical Condition: cracks, dents, scratches, missing screws
  • Problem Description: visible symptoms only
  • Engineer Comments: observed external damage or visible state

Avoid relying on images for things the image cannot prove, like internal faults or customer claims.

11. Important limitation

The model can help rewrite and structure notes from what it sees, but it should not be treated as a diagnostic authority. Keep your prompt strict: preserve facts, avoid guessing, and return only what is supported by the note and image.

12. What to implement next in your module

In code terms, the next changes are:

  • add setting: flexishop_openai_use_images
  • in optimize_note():
    • accept repair_job_id
    • load the repair image path
    • include input_image when available
  • keep current text-only optimization as fallback

Did you find this article useful?