app.py

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'])