文本生成模型前端无输出但控制台有内容的排查求助

我参照YouTube教程搭建了文本生成模型，仅对代码做少量修改。点击生成按钮后浏览器无输出，但控制台可看到返回数据。以下是相关代码：

HTML代码 #

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> Story Generator</title>
  <link rel="stylesheet" href="/styles.css">
</head>
<body>

  <nav>
    <img src="/yt_logo.png" alt="YouTube Logo">
    <h1>Text Data Generator</h1>
  </nav>

  
  <div class="container">
    <form class="meta-form">
      <h2>Generate Text</h2>
      <label for="title">
        <span> Title:</span>
        <input type="text" name="title">
        <button type="submit" value="Submit">generate story</button>
      </label>
    </form>
  
    <div class="description">
      <p>Your Story</p>
    </div>
    <div class="tags">
      <p>Facts</p>
    </div>
    
    
  </div><!-- end container -->

  <script src="/index.js"></script>
</body>
</html>

JavaScript代码 #

// forms
const metaForm = document.querySelector('.meta-form')


// output elements
const description = document.querySelector('.description p')
const tags = document.querySelector('.tags p')


// description and tags
metaForm.addEventListener('submit', async (e) => {
  e.preventDefault()

  const res = await fetch('/groq/meta', {
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({title: metaForm.title.value}),
    method: 'POST'
  })
  const data = await res.json()

  console.log(data)  

  description.textContent = data.description.content
  tags.textContent = data.tags.content
})

排查方向： #

• 核对返回数据结构：控制台打印的data可能和代码预期的层级不符。比如实际返回的是data.description直接是文本内容，而非data.description.content；或者字段名不同（比如data.story而非data.description）。可以把console.log(data)改成console.log(JSON.stringify(data, null, 2))，展开查看完整的JSON结构，确保取值路径正确。
• 检查DOM元素状态：确认.description p和.tags p没有被CSS隐藏。打开浏览器开发者工具的「元素」面板，查看这两个元素的样式，是否存在display: none、visibility: hidden或opacity: 0等属性；也可以临时给元素添加border: 1px solid red样式，确认它们在页面上的位置。
• 排查JS赋值错误：即使控制台能看到返回数据，若data.description或data.tags为undefined，访问content属性会抛出错误，导致后续代码执行中断。仔细查看控制台是否有未注意到的错误提示，定位问题。
• 验证请求状态：添加请求状态判断，确保fetch请求成功：

  const res = await fetch('/groq/meta', {
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({title: metaForm.title.value}),
    method: 'POST'
  })
  if (!res.ok) {
    throw new Error(`请求失败，状态码：${res.status}`);
  }
  const data = await res.json()
  

内容的提问来源于stack exchange，提问作者POOJA. M. J