ChatGPTのhtmlページをマークダウンに変換するプログラムをChatGPT自身に書いてもらう

※このページの主要部分は作成したpythonコードを用いて出力したのものです。
※作成するにあたりChatGPTとの会話をまず記載します。
※ChatGPTに書いてもらったコードを自分で微修正して完成させたものを本ページの最後に掲載しています。

あなたの発言

※「要素とストーリー構造.html」というファイルをアップロード。これはChatGPTとの会話ページをCtrl+Sで保存したものです。
ファイルアップロードしたものはChatGPTのページをHTMLとして保存したファイルとなります。
・このような構造のHTMLを読み込んで、以下の変換を行うpythonスクリプトを書いてください。
・左側にあるスレッド一覧を削除
・マークダウン形式に変換

ChatGPTの発言

HTMLファイルの内容を確認しました。指示に従って、左側のスレッド一覧を削除し、残りのコンテンツをマークダウン形式に変換するPythonスクリプトを作成します。この変換プロセスでは、HTMLを解析して必要な部分を識別し、それをマークダウン形式に再構成する手順を踏みます。まず、HTMLの構造を解析し、左側のスレッド一覧に相当する部分を特定し削除します。その後、残りのコンテンツをマークダウン形式に変換するための処理を行います。このスクリプトでは、BeautifulSoupライブラリを使用してHTMLを解析し、markdownifyライブラリを使用してHTMLをマークダウンに変換します。

pythonCopy code`from bs4 import BeautifulSoup
from markdownify import markdownify as md

def html\_to\_markdown(html\_path, output\_path):
 # HTMLファイルを読み込む
 with open(html_path, 'r', encoding='utf-8') as file:
 html_content = file.read()

 # BeautifulSoupを使用してHTMLを解析
 soup = BeautifulSoup(html_content, 'html.parser')
 
 # 左側のスレッド一覧を特定して削除（仮想のクラス名で説明。実際のクラス名はHTMLに合わせてください）
 thread_list = soup.find('div', {'class': 'left-sidebar'})
 if thread_list:
 thread_list.decompose()

 # 残りのHTMLをマークダウンに変換
 markdown_content = md(str(soup), heading_style="ATX")

 # 変換したマークダウンをファイルに保存
 with open(output_path, 'w', encoding='utf-8') as output_file:
 output_file.write(markdown_content)

# スクリプトを実行するためのパラメータ
html_path = 'path/to/your/html/file.html' # HTMLファイルのパス
output_path = 'path/to/your/output.md' # 出力ファイルのパス

# 関数を実行
html_to_markdown(html_path, output_path)`

このスクリプトでは、まずHTMLファイルを読み込み、解析のためにBeautifulSoupオブジェクトを生成します。次に、左側のスレッド一覧を表す部分を探し、見つかればその部分をHTMLドキュメントから削除します。その後、残りのHTMLコンテンツをマークダウンに変換し、指定された出力ファイルに保存します。

このコードを実行する前に、beautifulsoup4とmarkdownifyパッケージがインストールされていることを確認してください。必要に応じて、pip install beautifulsoup4 markdownifyを実行してインストールできます。また、実際のHTML構造に応じて、スレッド一覧を削除するためのセレクター（この例ではdivタグのclass属性）を適切に調整する必要があります。

あなたの発言

・話者「あなた」or「ChatGPT」の部分をそれとわかるようにそこを項目として切り出して ## でタイトルとしてください。

ChatGPTの発言

指示に基づいて、前述のPythonスクリプトを修正し、話者「あなた」または「ChatGPT」の部分を明確に区別し、それぞれの発言を##を使ってマークダウン形式のタイトルとして切り出す機能を追加します。この変更により、各発言はマークダウン文書内で明確に区分され、見出しとして扱われます。

pythonCopy code`from bs4 import BeautifulSoup
from markdownify import markdownify as md

def extract\_speaker\_sections(html\_content):
 """
 発言者に基づいてセクションを区切り、マークダウン形式の見出しを追加する。
 """
 # HTMLを解析して発言者のセクションを特定するためにBeautifulSoupを使用
 soup = BeautifulSoup(html_content, 'html.parser')
 
 # 発言者を示す要素を特定（この例ではclass名が'user'と'gpt'の要素）
 user_speeches = soup.find_all(class_='user')
 gpt_speeches = soup.find_all(class_='gpt')
 
 # 発言者ごとにマークダウン見出しを追加
 for speech in user_speeches:
 speech.insert_before(soup.new_string("## あなたの発言\n\n"))
 for speech in gpt_speeches:
 speech.insert_before(soup.new_string("## ChatGPTの発言\n\n"))
 
 # 変更を適用したHTMLを文字列として返す
 return str(soup)

def html\_to\_markdown\_with\_speakers(html\_path, output\_path):
 # HTMLファイルを読み込む
 with open(html_path, 'r', encoding='utf-8') as file:
 html_content = file.read()

 # 発言者のセクションにマークダウン見出しを追加
 modified_html = extract_speaker_sections(html_content)

 # 残りのHTMLをマークダウンに変換
 markdown_content = md(modified_html, heading_style="ATX")

 # 変換したマークダウンをファイルに保存
 with open(output_path, 'w', encoding='utf-8') as output_file:
 output_file.write(markdown_content)

# スクリプトを実行するためのパラメータ
html_path = '/mnt/data/要素とストーリー構造.html' # HTMLファイルのパスを修正済み
output_path = '/mnt/data/output\_with\_speakers.md' # 出力ファイルのパスを指定

# 関数を実行
html_to_markdown_with_speakers(html_path, output_path)`

このスクリプトは、指定されたHTMLファイル内の「あなた」および「ChatGPT」の発言を特定し、それぞれの発言の前にマークダウン形式の見出しを挿入します。その後、全体の内容をマークダウンに変換し、指定された出力ファイルに保存します。このプロセスは、文書内での各発言者の区別を明確にし、読みやすさを向上させることを目的としています。

注意: 実際のHTMLの構造に基づいて、extract_speaker_sections関数内で使用されるセレクター（この例ではclass名）を適宜調整する必要があります。また、beautifulsoup4とmarkdownifyライブラリが必要ですので、未インストールの場合はインストールしてください。

あなたの発言

※うまく動いてなかったのでHTMLの構造を自分で見た上以下のように指示しました。

・divの属性data-message-author-role="user"の場合は、あなたの発言
・divの属性data-message-author-role="assistant"の場合は、ChatGPTの発言
となるようにしてください

ChatGPTの発言

指定された属性に基づいて、発言者を識別し、マークダウンに変換するスクリプトを以下に示します。このスクリプトは、data-message-author-role属性を見て、それがuserかassistantかに応じて適切な見出しを付けます。

pythonCopy code`from bs4 import BeautifulSoup
from markdownify import markdownify as md

def html\_to\_markdown\_with\_speakers(html\_content):
 soup = BeautifulSoup(html_content, 'html.parser')

 # 発言を含む全てのdiv要素を検索
 sections = soup.find_all('div', attrs={"data-message-author-role": ["user", "assistant"]})

 markdown_output = ""

 for section in sections:
 if section['data-message-author-role'] == "user":
 speaker = "## あなたの発言\n\n"
 elif section['data-message-author-role'] == "assistant":
 speaker = "## ChatGPTの発言\n\n"
 
 speech_content = md(str(section), heading_style="ATX")
 markdown_output += speaker + speech_content + "\n\n"

 return markdown_output

# HTMLファイルの内容を読み込む
with open('/mnt/data/in.html', 'r', encoding='utf-8') as file:
 html_content = file.read()

# 変換処理を実行
markdown_content = html_to_markdown_with_speakers(html_content)

# 変換したマークダウンをファイルに保存
output_path = '/mnt/data/output\_with\_speakers.md'
with open(output_path, 'w', encoding='utf-8') as output_file:
 output_file.write(markdown_content)`

このスクリプトは、指定された属性を持つdiv要素を見つけ出し、それがuserかassistantかに応じて発言者を識別します。そして、それぞれの発言をマークダウン形式で適切な見出しと共に出力します。最終的なマークダウン形式のテキストは、指定された出力ファイルに保存されます。スクリプトを実行する前に、BeautifulSoupとmarkdownifyがインストールされていることを確認してください。

最後に自分で手を入れて出来たプログラム

※いい感じで動いてくれていたので、あとは入力ファイルを出力ファイルを自分でして以下のような用に修正しました。これも支持してやってもらっていいのかもしれませんがGithub Copilotの力を借りてちゃちゃっと修正してます。

from bs4 import BeautifulSoup
from markdownify import markdownify as md
from os import path
from argparse import ArgumentParser

# コマンドライン引数に指定したファイルを読み込み、発言者を含むマークダウンに変換してファイルに保存する
# 使用例: python conv.py in.html
# 使用例: python conv.py in.html --out=out.md
# infile = perse

# argparseを使って実装
parser = ArgumentParser(description='HTMLファイルをマークダウンに変換する')
parser.add_argument('infile', help='入力ファイルのパス')
parser.add_argument('--out', help='出力ファイルのパス') # , default='./out.md')

args = parser.parse_args()
infile  = args.infile
outfile = args.out

# outfileが指定されていない場合は、infileの拡張子を.mdに変更したものを出力ファイル名とする
if outfile is None:
    outfile = path.splitext(infile)[0] + '.md'

def html_to_markdown_with_speakers(html_content):
    soup = BeautifulSoup(html_content, 'html.parser')

    # 発言を含む全てのdiv要素を検索
    sections = soup.find_all('div', attrs={"data-message-author-role": ["user", "assistant"]})

    markdown_output = ""

    for section in sections:
        if section['data-message-author-role'] == "user":
            speaker = "## あなたの発言\n\n"
        elif section['data-message-author-role'] == "assistant":
            speaker = "## ChatGPTの発言\n\n"
        
        speech_content = md(str(section), heading_style="ATX")
        markdown_output += speaker + speech_content + "\n\n"

    return markdown_output

def html_to_markdown(infile, outfile): 

    # HTMLファイルの内容を読み込む
    with open(infile, 'r', encoding='utf-8') as file:
        html_content = file.read()

    # 変換処理を実行
    markdown_content = html_to_markdown_with_speakers(html_content)

    # 変換したマークダウンをファイルに保存
    with open(outfile, 'w', encoding='utf-8') as output_file:
        output_file.write(markdown_content)

# main 
html_to_markdown(infile, outfile)