[feat] Markdownを入力するとSlidevスライドを生成するアプリケーションの機能を追加

- Streamlitを使用してマークダウンからSlidevスライドを生成するWebアプリケーションを作成
- ユーザーがマークダウンを入力するテキストエリアを提供
- "Generate Slides"ボタンをクリックすると、以下の処理が行われる:
1. `slides/out`フォルダを初期化
2. 一時ファイル`temp.md`にマークダウンの内容を書き込む
3. `slidev`コマンドを実行してスライドを生成
4. 生成されたスライド画像を表示
5. 各スライド画像のダウンロードリンクを提供
6. すべてのスライドをZIPファイルに圧縮し、ダウンロードリンクを提供
7. 一時ファイルとZIPファイルを削除

[chore] Dockerfileの更新とビルドプロセスの改善

- Dockerfileを更新し、以下の変更を行った:
- `playwright`の依存関係をインストール
- ユーザー権限の設定を調整
- `slides`ディレクトリの作成
- README.mdにアプリケーションのメタデータを追加
- 開発用のコマンドをREADME.mdに追加

[docs] README.mdの更新

- アプリケーションのタイトル、色、SDKなどのメタデータをREADME.mdに追加
- 開発用のコマンドを追加

[chore] GitHub Actionsワークフローの追加

- Hugging Face hubへの同期用のGitHub Actionsワークフローを追加
- `main`ブランチへのプッシュまたは手動トリガーでワークフローが実行される
- リポジトリをチェックアウトし、Hugging Face hubにプッシュする

.github/workflows/run.yaml

@@ -0,0 +1,19 @@
+name: Sync to Hugging Face hub
+on:
+  push:
+    branches: [main]
+
+  # to run this workflow manually from the Actions tab
+  workflow_dispatch:
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          lfs: true
+      - name: Push to hub
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: git push --force  https://MakiAi:$HF_TOKEN@huggingface.co/spaces/MakiAi/TimeLinR main

Dockerfile

@@ -12,20 +12,20 @@ RUN apt-get update && apt-get install -y python3 python3-pip
 # 作業ディレクトリの設定
 WORKDIR /app
 
-# Slidevのインストール
 RUN npm install -g @slidev/cli@latest
-RUN npm install -D playwright-chromium
 RUN npx playwright install-deps
 RUN npx playwright install
+RUN chown -R user:user /app
+RUN chown -R user:user /usr/local/lib/node_modules/@slidev/
+USER user
 
-# Pythonスクリプトのコピー
-COPY run_slidev.py .
+# Slidevのインストール
+RUN npm install -D playwright-chromium
 
 # スライドディレクトリの作成
 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,3 +1,15 @@
+---
+title: SlideNova
+emoji: 🐠
+colorFrom: indigo
+colorTo: green
+sdk: docker
+pinned: false
+license: mit
+app_port: 8501
+---
+
+
 
 <p align="center">
 <img src="https://media.githubusercontent.com/media/Sunwood-ai-labs/SlideNova/develop/docs/SlideNova_icon.png" width="100%">
@@ -57,6 +69,12 @@ docker-compose up --build
 2. 「Generate Slides」ボタンをクリックします。
 3. 生成されたスライドが表示されます。
 
+## Develop command
+
+```bash
+yes | npx slidev export temp.md --format png --output slides/out/ --dark -t
+```
+
 ## 📖 ドキュメント
 
 より詳細な情報は、[ドキュメント](docs/)を参照してください。

app.py

@@ -2,22 +2,29 @@
 import streamlit as st
 import os
 import subprocess
+import zipfile
+import shutil
+import base64
 
 def main():
     st.title("Markdown to Slidev")
 
     # マークダウンファイルの内容を入力するテキストエリア
     markdown_text = st.text_area("Enter your markdown content here:", height=400)
-    # os.remove("/app/slides/out/*")
 
     # スライドを生成するボタン
     if st.button("Generate Slides"):
+        # slides/outフォルダを綺麗にする
+        if os.path.exists("slides/out"):
+            shutil.rmtree("slides/out")
+        os.makedirs("slides/out")
+
         # 一時ファイルにマークダウンの内容を書き込む
         with open("temp.md", "w") as f:
             f.write(markdown_text)
 
         # slidevコマンドを実行してスライドを生成
-        subprocess.run(["yes", "|", "npx", "slidev", "export", "temp.md", "--format", "png", "--output", "slides/out/", "--dark", "-t"])
+        subprocess.run(["npx", "slidev", "export", "temp.md", "--format", "png", "--output", "slides/out/", "--dark", "-t"])
 
         # 生成されたスライドを表示
         slides = []
@@ -27,10 +34,32 @@ def main():
         slides.sort()
 
         for slide in slides:
+            # 画像を表示
             st.image(f"slides/out/{slide}")
+            
+            # 画像をダウンロードするリンクを表示
+            with open(f"slides/out/{slide}", "rb") as f:
+                img_bytes = f.read()
+                b64 = base64.b64encode(img_bytes).decode()
+                href = f'<a href="data:image/png;base64,{b64}" download="{slide}">Download {slide}</a>'
+                st.markdown(href, unsafe_allow_html=True)
+
+        # スライドをZIPファイルに圧縮
+        zip_filename = "slides.zip"
+        with zipfile.ZipFile(zip_filename, "w") as zip_file:
+            for slide in slides:
+                zip_file.write(f"slides/out/{slide}", slide)
+
+        # ZIPファイルをダウンロードするリンクを表示
+        with open(zip_filename, "rb") as f:
+            bytes = f.read()
+            b64 = base64.b64encode(bytes).decode()
+            href = f'<a href="data:application/zip;base64,{b64}" download="{zip_filename}">Download All Slides</a>'
+            st.markdown(href, unsafe_allow_html=True)
 
-        # 一時ファイルを削除
+        # 一時ファイルとZIPファイルを削除
         os.remove("temp.md")
+        os.remove(zip_filename)
 
 if __name__ == "__main__":
     main()

temp.md

@@ -0,0 +1,17 @@
+# Slidev
+
+Hello World
+
+---
+
+# Page 2
+
+Directly use code blocks for highlighting
+
+```ts
+console.log('Hello, World!')
+```
+
+---
+
+# Page 3