Upload 4 files

app.py

@@ -0,0 +1,182 @@
+import streamlit as st
+import io
+from streamlit_ace import st_ace
+from utils import convert_file
+
+# Language dictionary
+LANG = {
+    'en': {
+        'title': "📊 Jupytext Demo App",
+        'info': "This app demonstrates the main features of Jupytext. "
+                "You can convert between Python (.py), Jupyter Notebook (.ipynb), and Markdown (.md) files. "
+                "Try different conversion options to experience the flexibility of Jupytext.",
+        'upload_header': "📁 File Upload",
+        'upload_label': "Choose a file to convert",
+        'file_uploaded': "✅ File successfully uploaded!",
+        'conversion_options': "🛠️ Conversion Options",
+        'output_format': "Output Format",
+        'py_format': "Python File Format",
+        'py_format_help': "percent: Use Jupyter cell markers, light: Simple markers, nomarker: No markers",
+        'comment_magics': "Comment out magic commands",
+        'comment_magics_help': "Only applies to Python output",
+        'convert_button': "🔄 Convert",
+        'conversion_success': "✅ Conversion successful!",
+        'download_button': "📥 Download Converted File",
+        'preview_header': "👀 Conversion Result Preview",
+        'conversion_error': "❌ An error occurred during conversion: ",
+        'about_header': "ℹ️ About Jupytext",
+        'about_text': ("Jupytext is a tool for converting between Jupyter Notebooks and various text-based formats "
+                       "(Python scripts, Markdown documents, etc.). Main features include:\n\n"
+                       "- Read and write Jupyter Notebooks (.ipynb).\n"
+                       "- Read and write Python scripts (.py) in Jupyter Notebook format.\n"
+                       "- Read and write Markdown files (.md) in Jupyter Notebook format.\n"
+                       "- Support multiple Python script formats (percent, light, nomarker, etc.).\n"
+                       "- Advanced conversion options like magic command processing and metadata retention.\n\n"
+                       "This demo app lets you experience Jupytext's basic conversion features. For more detailed information "
+                       "and advanced usage, please refer to the "
+                       "<a href='https://jupytext.readthedocs.io/' target='_blank'>official Jupytext documentation</a>."),
+        'usage_header': "📝 How to Use",
+        'usage_text': """
+        1. Upload a file (.py, .ipynb, .md) you want to convert.
+        2. Select the desired output format.
+        3. For Python files, choose the format (percent, light, nomarker).
+        4. Set additional options if needed.
+        5. Click the "Convert" button.
+        6. Download the converted file or check the content in the preview.
+
+        Try various input files and settings to explore Jupytext's capabilities!
+        """
+    },
+    'ja': {
+        'title': "📊 Jupytext デモアプリ",
+        'info': "このアプリは Jupytext の主要な機能をデモンストレーションします。"
+                "Python (.py)、Jupyter Notebook (.ipynb)、Markdown (.md) ファイルを相互に変換できます。"
+                "さまざまな変換オプションを試して、Jupytext の柔軟性を体験してください。",
+        'upload_header': "📁 ファイルアップロード",
+        'upload_label': "変換するファイルを選択してください",
+        'file_uploaded': "✅ ファイルが正常にアップロードされました！",
+        'conversion_options': "🛠️ 変換オプション",
+        'output_format': "出力形式",
+        'py_format': "Python ファイルの形式",
+        'py_format_help': "percent: Jupyter の cell マーカーを使用, light: シンプルなマーカー, nomarker: マーカーなし",
+        'comment_magics': "マジックコマンドをコメントアウト",
+        'comment_magics_help': "Python出力の場合のみ適用されます",
+        'convert_button': "🔄 変換",
+        'conversion_success': "✅ 変換が成功しました！",
+        'download_button': "📥 変換されたファイルをダウンロード",
+        'preview_header': "👀 変換結果プレビュー",
+        'conversion_error': "❌ 変換中にエラーが発生しました: ",
+        'about_header': "ℹ️ Jupytext について",
+        'about_text': ("Jupytext は Jupyter Notebooks と様々なテキストベースの形式（Python スクリプト、Markdown ドキュメントなど）の間で"
+                       "変換を行うツールです。主な特徴は以下の通りです：\n\n"
+                       "- Jupyter Notebooks (.ipynb) を読み書きできます。\n"
+                       "- Python スクリプト (.py) を Jupyter Notebooks 形式で読み書きできます。\n"
+                       "- Markdown ファイル (.md) を Jupyter Notebooks 形式で読み書きできます。\n"
+                       "- 複数の Python スクリプト形式をサポートしています（percent、light、nomarker など）。\n"
+                       "- マジックコマンドの処理やメタデータの保持など、高度な変換オプションを提供します。\n\n"
+                       "このデモアプリでは、Jupytext の基本的な変換機能を体験できます。より詳細な情報や高度な使用方法については、"
+                       "<a href='https://jupytext.readthedocs.io/' target='_blank'>Jupytext の公式ドキュメント</a> を参照してください。"),
+        'usage_header': "📝 使用方法",
+        'usage_text': """
+        1. 変換したいファイル (.py, .ipynb, .md) をアップロードします。
+        2. 目的の出力形式を選択します。
+        3. Python ファイルの場合、形式（percent、light、nomarker）を選択します。
+        4. 必要に応じて、追加のオプションを設定します。
+        5. 「変換」ボタンをクリックします。
+        6. 変換されたファイルをダウンロードするか、プレビューで内容を確認します。
+
+        さまざまな入力ファイルと設定を試して、Jupytext の機能を探索してください！
+        """
+    }
+}
+
+# ページ設定
+st.set_page_config(page_title="Jupytext Demo App", page_icon="📊", layout="wide")
+
+# スタイルシートの読み込み
+with open('style.css') as f:
+    st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
+
+# 言語選択
+lang = st.selectbox("Language / 言語", ["English", "日本語"])
+lang_code = 'en' if lang == "English" else 'ja'
+
+# メインアプリ
+st.markdown(f"<h1 class='main-header'>{LANG[lang_code]['title']}</h1>", unsafe_allow_html=True)
+
+st.markdown(f"""
+<div class="info-box">
+    {LANG[lang_code]['info']}
+</div>
+""", unsafe_allow_html=True)
+
+st.markdown(f"<h2 class='sub-header'>{LANG[lang_code]['upload_header']}</h2>", unsafe_allow_html=True)
+
+col1, col2 = st.columns([2, 1])
+
+with col1:
+    uploaded_file = st.file_uploader(LANG[lang_code]['upload_label'], type=["py", "ipynb", "md"])
+
+with col2:
+    st.markdown("<br>", unsafe_allow_html=True)  # 空白を追加してアライメントを調整
+    if uploaded_file is not None:
+        st.markdown(f"<div class='success-box'>{LANG[lang_code]['file_uploaded']}</div>", unsafe_allow_html=True)
+
+if uploaded_file is not None:
+    st.markdown(f"<h2 class='sub-header'>{LANG[lang_code]['conversion_options']}</h2>", unsafe_allow_html=True)
+    
+    col1, col2, col3 = st.columns(3)
+    
+    with col1:
+        output_format = st.selectbox(
+            LANG[lang_code]['output_format'],
+            ["py", "ipynb", "md"],
+            format_func=lambda x: f".{x}"
+        )
+    
+    with col2:
+        py_format = st.selectbox(
+            LANG[lang_code]['py_format'],
+            ["percent", "light", "nomarker"],
+            help=LANG[lang_code]['py_format_help']
+        )
+    
+    with col3:
+        comment_magics = st.checkbox(LANG[lang_code]['comment_magics'], value=True, help=LANG[lang_code]['comment_magics_help'])
+    
+    config = {
+        "py_format": py_format,
+        "comment_magics": comment_magics
+    }
+    
+    if st.button(LANG[lang_code]['convert_button'], key="convert_button"):
+        try:
+            converted_content, output_filename = convert_file(uploaded_file, output_format, config)
+            
+            st.markdown(f"<div class='success-box'>{LANG[lang_code]['conversion_success']}</div>", unsafe_allow_html=True)
+            
+            st.download_button(
+                label=LANG[lang_code]['download_button'],
+                data=converted_content,
+                file_name=output_filename,
+                mime="application/octet-stream"
+            )
+            
+            st.markdown(f"<h2 class='sub-header'>{LANG[lang_code]['preview_header']}</h2>", unsafe_allow_html=True)
+            preview = io.StringIO(converted_content.decode('utf-8')).getvalue()
+            
+            # エディタでプレビューを表示
+            st_ace(value=preview, language=output_format, theme="tomorrow", key="preview_editor")
+            
+        except Exception as e:
+            st.markdown(f"<div class='error-box'>{LANG[lang_code]['conversion_error']}{str(e)}</div>", unsafe_allow_html=True)
+
+st.markdown(f"<h2 class='sub-header'>{LANG[lang_code]['about_header']}</h2>", unsafe_allow_html=True)
+st.markdown(f"""
+<div class="info-box">
+{LANG[lang_code]['about_text']}
+</div>
+""", unsafe_allow_html=True)
+
+st.markdown(f"<h2 class='sub-header'>{LANG[lang_code]['usage_header']}</h2>", unsafe_allow_html=True)
+st.markdown(LANG[lang_code]['usage_text'])

requirements.txt

@@ -0,0 +1,6 @@
+beautifulsoup4==4.9.3
+markdown
+PyGithub
+loguru
+litellm
+pydantic_settings

style.css

@@ -0,0 +1,153 @@
+:root {
+    --primary-color: #F2C12E;
+    --background-color: #FFFFFF;
+    --secondary-bg-color: #F0F2F6;
+    --text-color: #1E1E1E;
+    --accent-color: #024959;
+    --success-color: #28A745;
+    --error-color: #DC3545;
+}
+
+body {
+    background-color: var(--background-color);
+    color: var(--text-color);
+    font-family: 'Roboto', sans-serif;
+}
+
+.stApp {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+.main-header {
+    font-size: 2.5rem;
+    color: var(--accent-color);
+    text-align: center;
+    margin-bottom: 2rem;
+    padding: 1rem;
+    background-color: var(--primary-color);
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.sub-header {
+    font-size: 1.8rem;
+    color: var(--accent-color);
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    padding: 0.5rem;
+    border-bottom: 2px solid var(--primary-color);
+}
+
+.info-box {
+    background-color: var(--secondary-bg-color);
+    color: var(--text-color);
+    padding: 1rem;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+    border-left: 5px solid var(--primary-color);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.success-box {
+    background-color: #E6F4EA;
+    color: var(--success-color);
+    padding: 1rem;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+    border-left: 5px solid var(--success-color);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.error-box {
+    background-color: #FCE8E6;
+    color: var(--error-color);
+    padding: 1rem;
+    border-radius: 5px;
+    margin-bottom: 1rem;
+    border-left: 5px solid var(--error-color);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.stButton>button {
+    background-color: var(--primary-color);
+    color: var(--accent-color);
+    border: none;
+    border-radius: 4px;
+    padding: 0.5rem 1rem;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.stButton>button:hover {
+    background-color: var(--accent-color);
+    color: var(--primary-color);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.stSelectbox [data-baseweb="select"] {
+    background-color: var(--background-color);
+    border-color: var(--primary-color);
+    border-radius: 4px;
+    color: var(--text-color);
+}
+
+.stCheckbox {
+    color: var(--text-color);
+}
+
+.stFileUploader {
+    background-color: var(--secondary-bg-color);
+    border-color: var(--primary-color);
+    border-radius: 4px;
+    padding: 1rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Dashboard-like appearance */
+.stApp > header {
+    background-color: var(--accent-color);
+    padding: 1rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.stApp > header .decoration {
+    display: none;
+}
+
+.stApp > header #MainMenu {
+    color: var(--primary-color);
+}
+
+.stApp > footer {
+    background-color: var(--secondary-bg-color);
+    border-top: 1px solid var(--primary-color);
+    padding: 1rem;
+    text-align: center;
+    font-size: 0.8rem;
+    color: var(--text-color);
+}
+
+/* Additional dashboard-like elements */
+.metric-card {
+    background-color: var(--background-color);
+    border-radius: 8px;
+    padding: 1rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin-bottom: 1rem;
+}
+
+.metric-card h3 {
+    color: var(--accent-color);
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+}
+
+.metric-card p {
+    font-size: 2rem;
+    font-weight: bold;
+    color: var(--primary-color);
+    margin: 0;
+}

utils.py

@@ -0,0 +1,35 @@
+import jupytext
+import os
+import tempfile
+
+def convert_file(input_file, output_format, config):
+    with tempfile.TemporaryDirectory() as temp_dir:
+        base_name = os.path.splitext(input_file.name)[0]
+        output_file = os.path.join(temp_dir, f"{base_name}.{output_format}")
+        content = input_file.getvalue()
+        input_format = os.path.splitext(input_file.name)[1][1:]
+
+        read_options = {}
+        write_options = {}
+        
+        if input_format in ["py", "md"]:
+            read_options["fmt"] = f"{input_format}:{config['py_format']}" if input_format == "py" else input_format
+            notebook = jupytext.reads(content.decode(), **read_options)
+        else:
+            notebook = jupytext.reads(content, fmt=input_format)
+
+        if output_format == "py":
+            write_options["fmt"] = f"{output_format}:{config['py_format']}"
+            if config["comment_magics"]:
+                write_options["comment_magics"] = True
+        elif output_format == "ipynb":
+            write_options["fmt"] = output_format
+        else:
+            write_options["fmt"] = output_format
+
+        jupytext.write(notebook, output_file, **write_options)
+        
+        with open(output_file, "rb") as f:
+            converted_content = f.read()
+        
+        return converted_content, f"{base_name}.{output_format}"