python

【python】RAG x Chatbot 行間が揃わない時は、プロンプトを疑え

🌀 はじめに ― “AIから出力を

RAGを使ったChatbotを作りました。もっと見栄えを良くしようということで、html形式に対応させて「見出し」や「箇条書き」で表現しようと思ったのですが、ここでトラブルが発生。

出力してみると、何故か行間が狭かったり広かったりするんです。

html形式なのでCSSいじればいいんじゃないかと、line-heightやmarginをいじっても変わらない。今回はそんなトラブルをどう解決したのかを紹介します。

    ❌ ダメな例：AIにHTMLタグ出力を指示してしまうのはNG

    RAGを使う際にも、生成Aiに渡すプロンプトは書かないといけないのですが、「html形式で出力して」とかいって、下のように出力されると思うんです。
    これであとはCSSで調整すればいいかな思っていたのですが、これではダメ。

    <h2>プロジェクト管理の主なポイント</h2>
<ul>
  <li>タスクの進捗を定期的に確認する</li>
  <li>チームメンバー間で情報共有を徹底する</li>
  <li>リスクを事前に洗い出して対応策を検討する</li>
</ul>

    どうしてダメかというと、どうにもブラウザによっては、標準のスタイルが矯正されてしまうみたい。

    ✅ 良い例：AIにMarkdownで出力させる

    そこで、解決方法としては、以下の様にMarkdown方式で生成Aiに出力させるというもの

    ## プロジェクト管理の主なポイント

- タスクの進捗を定期的に確認する
- チームメンバー間で情報共有を徹底する
- リスクを事前に洗い出して対応策を検討する

    📝 生成Aiに投げるプロンプト例：「必ずMarkdownで出力させる」

    回答する際、**見やすくするため、必ずMarkdown記法（#や##などの見出し、-や*や1.などのリスト）で構造化してください。**
見出しは必要に応じて #（h1） ##（h2） ###（h3）などを用い、箇条書きは - または *、番号付きリストは 1. 2. の形式で記載してください。
リストのネストもMarkdownで表現し、最大3階層まで可能とします。
**HTMLタグ（<h2>、<ul>、<ol>、<li>、<strong>、<b>など）は絶対に使用しないでください。**
強調したい箇所は *イタリック* または **ボールド** のみ許可します。

    🖥️ CSSでさらに詰めたい場合（Markdownにも効く！）

    その後、style.cssで<li>や<h3>などのスタイルを決定すればOK。

    .markdown-body li {
  line-height: 1.1;
  margin-top: 0.1em;
}

    🧑‍🔬 行間・余白の違いまとめ表

    出力例見た目修正しやすさ
    <ul><li>…</li></ul>行間広い／謎の隙間CSS効きにくい
    - 項目（Markdown）行間ギュッと詰まるCSS効きやすい
    • HTMLタグは“不可視ノード”やデフォルト余白が重なり、制御困難
    • Markdown経由はシンプルな構造となり、CSSでの調整が容易

    🎉 まとめ：AI出力のリストはMarkdown方式が最適解！

    • AIにHTMLタグでの出力をさせない
    • Markdownによる出力をプロンプトで厳守させる
    • CSSでの行間調整も素直に効き、行間地獄から解放！

    -python
    -, ,