yowasou · September 8, 2024 08:09
diff --git a/png.rb b/png.rb
 #
 # フォルダ以下のPNGファイルのメタデータを全部読み込んでHTMLに書き出す
 # Stable Diffusion で参考になるプロンプトを探すために作成
 #

 require 'chunky_png'

 def template_html
    return <<'EOS'
    <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PNG METADATA</title>
  <style>
    .table {
      display: grid;
      border: 1px solid #333;
    }

    .row {
      display: grid;
      border-bottom: 1px solid #333;
      grid-template-columns: 0.1fr 0.5fr 1fr 2fr;
    }

    .row:last-child {
      border-bottom: none;
    }

    .cell {
      flex: 1;
      padding: 10px;
      border-right: 1px solid #333;
      text-align: center;
    }

    .cell:last-child {
      border-right: none;
    }

    .header {
      font-weight: bold;
      background-color: #f0f0f0;
    }

    .image-container {
      width: 200px;
      height: 200px;
      object-fit: contain;
    }
    .resize-image {
      width: 100%;
      height: 100%;
      object-fit: contain;  /* 画像を枠内に収め、縦横比を維持 */
    }
  </style>
 </head>
 <body>
  <div class="table">
    <div class="row header">
      <div class="cell">No</div>
      <div class="cell">File Name</div>
      <div class="cell">Png Image</div>
      <div class="cell">Params</div>
    </div>
    %rows%
  </div>
 </body>
 <script>
  // すべての画像要素を取得
  const images = document.querySelectorAll('.resize-image');

  // 各画像に対してクリックイベントを設定
  images.forEach(function(img) {
    img.addEventListener('click', function() {
      const imgSrc = img.src;  // 画像のソースを取得
      window.open(imgSrc, '_blank');  // 新しいタブで画像を開く
    });
  });
 </script>
 </html>
 EOS
 end

 def template_row
    return <<'EOS'
    <div class="row">
    <div class="cell">%no%</div>
    <div class="cell">%name%</div>
    <div class="cell image-container"><img src = "%name%" class="resize-image" /></div>
    <div class="cell">%params%</div>
  </div>
 EOS
 end

 if (ARGV.count < 1)
  puts "please set parameter for directory"
  exit
 end

 directory = File.dirname(ARGV[0])

 png_files = Dir.glob(File.join(directory, '**', '*.png'))
 rows = ""
 num = 0
 png_files.each do |file|
  num = num + 1
  png = ChunkyPNG::Image.from_file(file)
  metastr = ""
  metadata = png.metadata
  metadata.each do |key, value|
    metastr = metastr + "#{key}: #{value}" + "\r\n"
  end
  row = template_row
  row.gsub!("%no%", num.to_s)
  row.gsub!("%name%", File.basename(file))
  row.gsub!("%params%", metastr)
  row = row + "\r\n"
  rows = rows + row.force_encoding("UTF-8") 
  puts row
 end

 outstr = template_html
 outstr.gsub!("%rows%", rows)

 File.open(directory + '\index.html',"w") do |indexhtml|
  indexhtml.puts(outstr)
 end
	#
	# フォルダ以下のPNGファイルのメタデータを全部読み込んでHTMLに書き出す
	# Stable Diffusion で参考になるプロンプトを探すために作成
	#

	require 'chunky_png'

	def template_html
	return <<'EOS'
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>PNG METADATA</title>
	<style>
	.table {
	display: grid;
	border: 1px solid #333;
	}

	.row {
	display: grid;
	border-bottom: 1px solid #333;
	grid-template-columns: 0.1fr 0.5fr 1fr 2fr;
	}

	.row:last-child {
	border-bottom: none;
	}

	.cell {
	flex: 1;
	padding: 10px;
	border-right: 1px solid #333;
	text-align: center;
	}

	.cell:last-child {
	border-right: none;
	}

	.header {
	font-weight: bold;
	background-color: #f0f0f0;
	}

	.image-container {
	width: 200px;
	height: 200px;
	object-fit: contain;
	}
	.resize-image {
	width: 100%;
	height: 100%;
	object-fit: contain; /* 画像を枠内に収め、縦横比を維持 */
	}
	</style>
	</head>
	<body>
	<div class="table">
	<div class="row header">
	<div class="cell">No</div>
	<div class="cell">File Name</div>
	<div class="cell">Png Image</div>
	<div class="cell">Params</div>
	</div>
	%rows%
	</div>
	</body>
	<script>
	// すべての画像要素を取得
	const images = document.querySelectorAll('.resize-image');

	// 各画像に対してクリックイベントを設定
	images.forEach(function(img) {
	img.addEventListener('click', function() {
	const imgSrc = img.src; // 画像のソースを取得
	window.open(imgSrc, '_blank'); // 新しいタブで画像を開く
	});
	});
	</script>
	</html>
	EOS
	end

	def template_row
	return <<'EOS'
	<div class="row">
	<div class="cell">%no%</div>
	<div class="cell">%name%</div>
	<div class="cell image-container"><img src = "%name%" class="resize-image" /></div>
	<div class="cell">%params%</div>
	</div>
	EOS
	end

	if (ARGV.count < 1)
	puts "please set parameter for directory"
	exit
	end

	directory = File.dirname(ARGV[0])

	png_files = Dir.glob(File.join(directory, '*', '.png'))
	rows = ""
	num = 0
	png_files.each do \|file\|
	num = num + 1
	png = ChunkyPNG::Image.from_file(file)
	metastr = ""
	metadata = png.metadata
	metadata.each do \|key, value\|
	metastr = metastr + "#{key}: #{value}" + "\r\n"
	end
	row = template_row
	row.gsub!("%no%", num.to_s)
	row.gsub!("%name%", File.basename(file))
	row.gsub!("%params%", metastr)
	row = row + "\r\n"
	rows = rows + row.force_encoding("UTF-8")
	puts row
	end

	outstr = template_html
	outstr.gsub!("%rows%", rows)

	File.open(directory + '\index.html',"w") do \|indexhtml\|
	indexhtml.puts(outstr)
	end