[feat] Dockerfileの更新とREADMEの改善

以下の変更を行いました：

- Dockerfileを更新し、ユーザー権限の設定とパッケージのインストールを改善
- READMEにプロジェクトのロゴ、タイトル、説明を追加し、見た目を向上
- app.pyを更新し、Streamlitアプリケーションの機能を改善
- docker-compose.ymlにユーザー設定を追加
- docs/SlideNova_icon.pngを追加しプロジェクトのアイコンを設定
- run_slidev.pyを更新し、slidevコマンドの実行方法を改善

これらの変更により、プロジェクトのセットアップと使用がより簡単になり、ドキュメントの見た目も向上しました。

[docs] READMEの改善

README.mdを更新し、以下の改善を行いました：

- プロジェクトのロゴとタイトルを追加
- プロジェクトの説明を追加
- バッジを追加してプロジェクトの情報を表示
- コードブロックのフォーマットを改善

これにより、プロジェクトの概要がわかりやすくなり、READMEの見た目が向上しました。

[feat] Streamlitアプリケーションの機能改善

app.pyを更新し、以下の機能改善を行いました：

- マークダウンの内容を入力するテキストエリアを追加
- スライドを生成するボタンを追加
- 生成されたスライドを表示する機能を追加
- 一時ファイルを利用してスライドを生成するように変更

これにより、ユーザーがマークダウンを入力し、スライドを生成して表示できるようになりました。

[chore] docker-compose.ymlにユーザー設定を追加

docker-compose.ymlを更新し、以下の変更を行いました：

- servicesセクションにuser: userを追加し、コンテナ内で使用するユーザーを指定

これにより、コンテナ内で適切なユーザー権限が設定されるようになりました。

[docs] プロジェクトアイコンの追加

docs/SlideNova_icon.pngを追加し、プロジェクトのアイコンを設定しました。

これにより、プロジェクトの視覚的なアイデンティティが確立されました。

[refactor] run_slidev.pyの改善

run_slidev.pyを更新し、以下の改善を行いました：

- 不要なコメントアウトされたコードを削除
- slidevコマンドの実行方法を変更し、エクスポートオプションを追加

これにより、コードの可読性が向上し、slidevコマンドの実行方法が改善されました。

Dockerfile

@@ -1,6 +1,11 @@
 # Dockerfile
 FROM node:18
 
+USER root
+RUN useradd -m -u 1001 user
+WORKDIR /app
+RUN chown -R user:user /app
+
 # Pythonのインストール
 RUN apt-get update && apt-get install -y python3 python3-pip
 
@@ -11,9 +16,14 @@ WORKDIR /app
 RUN npm install -g @slidev/cli@latest
 RUN npm install -D playwright-chromium
 RUN npx playwright install-deps
+RUN npx playwright install
 
 # Pythonスクリプトのコピー
 COPY run_slidev.py .
 
 # スライドディレクトリの作成
-RUN mkdir slides
+RUN mkdir slides
+
+RUN chown -R user:user /app
+RUN chown -R user:user /usr/local/lib/node_modules/@slidev/
+USER user

README.md

@@ -1,11 +1,21 @@
-# SlideNova
+<p align="center">
+<img src="https://media.githubusercontent.com/media/Sunwood-ai-labs/SlideNova/main/docs/icon.png" width="100%">
+<br>
+<h1 align="center">SlideNova</h1>
+<h3 align="center">
+  ～Your Timeline, Your Way～
 
+[![Hugging Face Spaces](https://img.shields.io/badge/%F0%9F%A4%97%20Hugging%20Face-Spaces-blue)](https://huggingface.co/spaces/Sunwood-ai-labs/SlideNova)[![](https://img.shields.io/github/stars/Sunwood-ai-labs/SlideNova)](https://github.com/Sunwood-ai-labs/SlideNova)[![](https://img.shields.io/github/last-commit/Sunwood-ai-labs/SlideNova)](https://github.com/Sunwood-ai-labs/SlideNova)[![](https://img.shields.io/github/languages/top/Sunwood-ai-labs/SlideNova)](https://github.com/Sunwood-ai-labs/SlideNova)[![GitHub Release](https://img.shields.io/github/v/release/Sunwood-ai-labs/SlideNova?sort=date&color=red)
+](https://github.com/Sunwood-ai-labs/SlideNova)
+</h3>
+
+</p>
 
 ```bash
 npx slidev slides/demo.md --remote 
 ```
 
 ```bash
-npx slidev export slides/demo.md --format png --output slides/out/ --dark
+npx slidev export slides/demo.md --format png --output slides/out/ --dark -t
 ```
 

app.py

@@ -1,38 +1,35 @@
+# app.py
 import streamlit as st
-from marp import Marp
-import base64
-from io import BytesIO
+import os
+import subprocess
 
 def main():
-    st.title("Marp Slide Generator")
-    
-    # マークダウン入力欄
-    markdown_text = st.text_area("Enter your markdown text here:", height=400)
-    
+    st.title("Markdown to Slidev")
+
+    # マークダウンファイルの内容を入力するテキストエリア
+    markdown_text = st.text_area("Enter your markdown content here:", height=400)
+
+    # スライドを生成するボタン
     if st.button("Generate Slides"):
-        # Marpオブジェクトの作成
-        marp = Marp()
-        
-        # マークダウンからスライドを生成
-        slides = marp.convert(markdown_text)
-        
-        # スライドを画像に変換
-        images = []
+        # 一時ファイルにマークダウンの内容を書き込む
+        with open("temp.md", "w") as f:
+            f.write(markdown_text)
+
+        # slidevコマンドを実行してスライドを生成
+        subprocess.run(["npx", "slidev", "export", "temp.md", "--format", "png", "--output", "slides/out/", "--dark", "-t"])
+
+        # 生成されたスライドを表示
+        slides = []
+        for filename in os.listdir("slides/out"):
+            if filename.endswith(".png"):
+                slides.append(filename)
+        slides.sort()
+
         for slide in slides:
-            image_data = slide.render(format="png")
-            images.append(image_data)
-        
-        # 画像を表示
-        st.subheader("Generated Slides")
-        for i, image in enumerate(images):
-            st.image(image, caption=f"Slide {i+1}", use_column_width=True)
-            
-            # 画像をダウンロード可能なリンクとして提供
-            buffered = BytesIO()
-            image.save(buffered, format="PNG")
-            img_str = base64.b64encode(buffered.getvalue()).decode()
-            href = f'<a href="data:file/png;base64,{img_str}" download="slide_{i+1}.png">Download Slide {i+1}</a>'
-            st.markdown(href, unsafe_allow_html=True)
+            st.image(f"slides/out/{slide}")
+
+        # 一時ファイルを削除
+        os.remove("temp.md")
 
 if __name__ == "__main__":
     main()

docker-compose.yml

@@ -10,4 +10,5 @@ services:
     ports:
       - "3030:3030"
     # command: python3 run_slidev.py
-    tty: true
+    tty: true
+    user: user

run_slidev.py

@@ -2,14 +2,6 @@
 import os
 import subprocess
 
-# Slideを格納するディレクトリを指定
-slide_dir = "./slides"
-
-# Slideのエントリーポイントを指定
-slide_entry = "slides.md"
-
-# slidevコマンドを実行してスライドを開発モードで起動
-# subprocess.run(["npx", "slidev", slide_entry])
 
 # slidevコマンドを実行してスライドをビルド
-subprocess.run(["npx", "slidev", "build", slide_entry])
+subprocess.run(["npx slidev export slides/demo.md --format png --output slides/out/ --dark -t"])