Product Creation with AI: Details Not Visible in Preview Screen on Xcode 15 and iOS 17

[pmusolino]

I'm experiencing an issue while using product creation with AI on Xcode 15 and iOS 17. Specifically, the Name, Description and Short Description of the product are not visible in the preview screen.

However, when I compile the app with Xcode 14 (and iOS 16), everything works fine and all the product details are visible as expected.

Steps to Reproduce:

1. Run the app compiled with Xcode 15.
2. Navigate to the product creation feature and use AI to create a new product.
3. Notice that Name, Description and Short Description in the preview are hidden.

Additional Information:

This issue seems to be specific to Xcode 15 and iOS 17, as the problem does not occur when using Xcode 14 and iOS 16.

Video

[peril-woocommerce[bot]]

	Fails
:no_entry_sign:	Please add a feature label to this issue. e.g. 'feature: stats'

Generated by :no_entry_sign: dangerJS

[jaclync]

Hey @pmusolino 👋 I was looking into this task to upgrade CI to Xcode 15.0.1, and trying to reproduce this issue. I saw the empty name/description fields a few times, but when I inspected the values they were empty strings. Given the API's indeterministic nature, I couldn't reproduce it every time though. Could you verify if the values are empty when you see these empty fields?

When the loading state is disabled, the SwiftUI preview for the preview screen also looks fine in Xcode 15.

[pmusolino]

@jaclync, I wonder if it's a parsing issue. When it happened to me, I inspected the content of the API request using Wormholy and found that every value in the JSON was fulfilled. I'll do another test 🤔

[pmusolino]

Upon conducting further tests, it appears that the content is fulfilled, but the JSON format is incorrect, as it embeds the keys under en (the recognized language). Using the same content from my video above, this issue occurs almost constantly. Thus, it is not a problem exclusive to Xcode 15 and iOS 17, but could also occur on Xcode 14 and iOS 16.

Here is the JSON returned:

{
  "completion": {
    "name": {
      "en": "Handmade vegan leather tote bag"
    },
    "description": {
      "en": "Discover the perfect blend of style and sustainability with our handmade vegan leather tote bag. This luxurious bag is crafted by WD Brand, known for its commitment to quality and environmental responsibility. The interior features a unique aluminum lining, adding a touch of modern sophistication to the classic tote design. Whether you're heading to the office or a weekend getaway, this versatile bag is sure to elevate any outfit with its elegant and timeless appeal."
    },
    "short_description": {
      "en": "Luxurious yet sustainable, our handmade vegan leather tote bag by WD Brand is the perfect accessory for any occasion. Featuring an aluminum-lined interior, this bag combines modern style with eco-friendly materials for a truly unique and sophisticated look."
    },
    "virtual": false,
    "shipping": {
      "weight": 0.7,
      "length": 35,
      "width": 15,
      "height": 25
    },
    "price": 150,
    "tags": [
      "Adventure",
      "Creativity",
      "Island Life",
      "Simulation",
      "Social Interaction",
      "Test",
      "Vegan",
      "Luxury Brand"
    ],
    "categories": [
      "Accessories",
      "Clothing"
    ]
  }
}

[jaclync]

Upon conducting further tests, it appears that the content is fulfilled, but the JSON format is incorrect, as it embeds the keys under en (the recognized language). Using the same content from my video above, this issue occurs almost constantly. Thus, it is not a problem exclusive to Xcode 15 and iOS 17, but could also occur on Xcode 14 and iOS 16.

Here is the JSON returned:

This is frustrating 😞 When I was testing, I also encountered an error alert that said the response wasn't a JSON. Maybe we can look into tweaking the prompt to ensure the JSON schema.

[itsmeichigo]

As reported in [p1704800482187709/1704800260.482749-slack-C03L1NF1EA3] I saw another case where the response was incorrect (with the json after the backticks):

{
  "completion": "```json\n{\n  \"name\": \"2 bedroom apartment in Bangkok\",\n  \"description\": \"Located in the Silom area of Bangkok, this fully equipped 2 bedroom apartment is situated near a BTS station, making it convenient for travelers. The apartment features a kitchen, washing machine, and TV, providing a comfortable and convenient stay for guests. With modern amenities and a central location, this apartment is ideal for both short-term and long-term stays in Bangkok.\",\n  \"short_description\": \"2 bedroom apartment in Silom area, near BTS station, fully equipped with kitchen, washing machine, TV\",\n  \"virtual\": false,\n  \"shipping\": {\n    \"weight\": 0,\n    \"length\": 0,\n    \"width\": 0,\n    \"height\": 0\n  },\n  \"price\": 1500,\n  \"tags\": [\"Silom area\", \"BTS station\", \"fully equipped\", \"2 bedroom\", \"apartment\", \"Bangkok\", \"accommodation\"],\n  \"categories\": [\"Real Estate\", \"Travel Accommodation\"]\n}\n```"
}

I'm not sure how we can reliably sanitize the response to get the correct JSON format.

[selanthiraiyan]

I am reopening this issue as product creation is consistently failing due to unexpected JSON response. The issue is the same as @itsmeichigo defined in the comment above https://github.com/woocommerce/woocommerce-ios/issues/11188#issuecomment-1884125427.

JSON received

{
  "completion": "```json\n{\n  \"shipping\": {\n    \"height\": \"160\",\n    \"length\": \"399\",\n    \"weight\": \"1250\",\n    \"width\": \"181\"\n  },\n  \"name\": \"Tata Nexon\",\n  \"price\": \"25000\",\n  \"short_description\": \"Sleek top model Tata Nexon in automatic and stunning white color.\",\n  \"tags\": [\"Automatic\", \"White Colour\", \"Top Model\", \"SUV\", \"Tata Nexon\"],\n  \"description\": \"Meet the Tata Nexon, your dream SUV that combines style with performance. Decked out in a striking white, this top model isn't just about looks. It's automatic, so you can expect smooth driving and effortless gear shifts. Whether it's city streets or country roads, the Nexon takes it all in stride. Plus, its spacious and high-tech interior means you're riding in comfort and connected on-the-go. Who knew practicality could look this good and drive this smooth?\",\n  \"categories\": [\"Automobiles\", \"SUVs\"],\n  \"virtual\": false\n}\n```"
}

Screenshot of the failure

Possible solution

We could update the prompt and explicitly ask AI not to include the word JSON in response.

[selanthiraiyan]

Closed by #12457