- 🚀 Transformers.js App Ready!
- Your multi-file Transformers.js application is ready for deployment.
- 👉 Use the Deploy button in the sidebar to publish your app!
-
- """
-
-
- def show_deploy_components(*args):
- return gr.Button(visible=True)
-
- def hide_deploy_components(*args):
- return gr.Button(visible=True)
-
- # Show textbox when import button is clicked
- def toggle_import_textbox(url_visible):
- # If textbox is already visible and has content, proceed with import
- # Otherwise, just show the textbox
- return gr.update(visible=True)
-
- load_project_btn.click(
- fn=toggle_import_textbox,
- inputs=[load_project_url],
- outputs=[load_project_url]
- ).then(
- handle_import_project,
- inputs=[load_project_url],
- outputs=[
- load_project_status,
- code_output,
- load_project_url,
- history,
- history_output,
- deploy_btn,
- import_header_md,
- load_project_btn,
- language_dropdown,
- chat_history, # Add chat_history to outputs
- ],
- )
-
-
-
-
-
- def begin_generation_ui(agent_enabled):
- # In agent mode, keep sidebar open during question/task planning phase
- # Only close it when actual code generation starts
- if agent_enabled:
- return [gr.update(), gr.update(visible=False)] # Keep sidebar as-is
- else:
- # Normal mode: collapse sidebar immediately
- return [gr.update(open=False), gr.update(visible=False)]
-
- def end_generation_ui():
- # Open sidebar after generation; hide the status
- return [gr.update(open=True), gr.update(visible=False)]
-
- def close_sidebar_for_coding():
- # Close sidebar when transitioning to actual code generation
- return gr.update(open=False)
-
- def generation_code_wrapper(inp, sett, hist, model, lang, prov, agent_enabled, agent_state, profile: Optional[gr.OAuthProfile] = None, token: Optional[gr.OAuthToken] = None):
- """Wrapper to call generation_code or agent mode based on settings"""
-
- # Check if agent mode is enabled
- if agent_enabled and agent_state["stage"] == "initial":
- # Agent mode - first interaction, ask questions
- # Sidebar stays open during this phase
- for updated_hist, chatbot_msgs in agent_generate_with_questions(
- inp, sett, hist, model, lang, prov, profile, token
- ):
- # Update agent state to track that we're waiting for answers
- new_agent_state = {
- "stage": "waiting_for_answers",
- "original_query": inp,
- "questions": updated_hist[-1][1] if updated_hist else ""
- }
- # Yield: code_output, history, history_output, chat_history, agent_conversation_state, sidebar
- yield "", updated_hist, chatbot_msgs, chatbot_msgs, new_agent_state, gr.update()
- return
-
- elif agent_enabled and agent_state["stage"] == "waiting_for_answers":
- # Agent mode - user has answered questions, now create task list and generate code
- original_query = agent_state.get("original_query", "")
- questions = agent_state.get("questions", "")
-
- # Track whether we've started code generation to close sidebar
- started_code_generation = False
-
- # Process answers and generate code
- for result in agent_process_answers_and_generate(
- inp, original_query, questions, sett, hist, model, lang, prov,
- profile, token, code_output, history_output, history
- ):
- # Extract values from result dict
- code_val = result.get(code_output, "")
- hist_val = result.get(history, hist)
- history_output_val = result.get(history_output, [])
-
- # Reset agent state after generation
- reset_agent_state = {
- "stage": "initial",
- "original_query": "",
- "questions": ""
- }
-
- # Close sidebar when we start generating code (when code_output has content)
- if code_val and not started_code_generation:
- sidebar_update = gr.update(open=False)
- started_code_generation = True
- else:
- sidebar_update = gr.update()
-
- # Yield: code_output, history, history_output, chat_history, agent_conversation_state, sidebar
- yield code_val, hist_val, history_output_val, history_output_val, reset_agent_state, sidebar_update
- return
-
- else:
- # Normal mode - direct code generation
- # Sidebar was already closed by begin_generation_ui
- for result in generation_code(inp, sett, hist, model, lang, prov, profile, token, code_output, history_output, history):
- # generation_code yields dictionaries with component keys
- # Extract the values and yield them for our outputs
- code_val = result.get(code_output, "")
- hist_val = result.get(history, hist)
- history_output_val = result.get(history_output, [])
- # Yield for: code_output, history, history_output, chat_history, agent_conversation_state, sidebar
- yield code_val, hist_val, history_output_val, history_output_val, agent_state, gr.update()
-
- # Update agent_mode_enabled state when checkbox changes
- agent_mode_checkbox.change(
- lambda enabled: enabled,
- inputs=[agent_mode_checkbox],
- outputs=[agent_mode_enabled]
- )
-
- btn.click(
- begin_generation_ui,
- inputs=[agent_mode_enabled],
- outputs=[sidebar, generating_status],
- show_progress="hidden",
- ).then(
- generation_code_wrapper,
- inputs=[input, setting, history, current_model, language_dropdown, provider_state, agent_mode_enabled, agent_conversation_state],
- outputs=[code_output, history, history_output, chat_history, agent_conversation_state, sidebar]
- ).then(
- end_generation_ui,
- inputs=None,
- outputs=[sidebar, generating_status]
- ).then(
- # After generation, toggle editors for transformers.js and populate
- toggle_editors,
- inputs=[language_dropdown, code_output],
- outputs=[code_output, tjs_group, tjs_html_code, tjs_js_code, tjs_css_code, react_group, react_code_dockerfile, react_code_package_json, react_code_next_config, react_code_postcss_config, react_code_tailwind_config, react_code_pages_app, react_code_pages_index, react_code_components, react_code_styles]
- ).then(
- # After generation, toggle static multi-file editors for HTML
- toggle_static_editors,
- inputs=[language_dropdown, code_output],
- outputs=[
- code_output,
- static_group_2, static_group_3, static_group_4, static_group_5plus,
- static_tab_2_1, static_code_2_1, static_tab_2_2, static_code_2_2,
- static_tab_3_1, static_code_3_1, static_tab_3_2, static_code_3_2, static_tab_3_3, static_code_3_3,
- static_tab_4_1, static_code_4_1, static_tab_4_2, static_code_4_2, static_tab_4_3, static_code_4_3, static_tab_4_4, static_code_4_4,
- static_tab_5_1, static_code_5_1, static_tab_5_2, static_code_5_2, static_tab_5_3, static_code_5_3, static_tab_5_4, static_code_5_4, static_tab_5_5, static_code_5_5,
- ]
- ).then(
- # After generation, toggle Python multi-file editors for Gradio/Streamlit
- toggle_python_editors,
- inputs=[language_dropdown, code_output],
- outputs=[
- code_output, python_group_2, python_group_3, python_group_4, python_group_5plus,
- python_tab_2_1, python_code_2_1, python_tab_2_2, python_code_2_2,
- python_tab_3_1, python_code_3_1, python_tab_3_2, python_code_3_2, python_tab_3_3, python_code_3_3,
- python_tab_4_1, python_code_4_1, python_tab_4_2, python_code_4_2, python_tab_4_3, python_code_4_3, python_tab_4_4, python_code_4_4,
- python_tab_5_1, python_code_5_1, python_tab_5_2, python_code_5_2, python_tab_5_3, python_code_5_3, python_tab_5_4, python_code_5_4, python_tab_5_5, python_code_5_5
- ]
- ).then(
- show_deploy_components,
- None,
- [deploy_btn]
- )
-
- # Pressing Enter in the main input should trigger generation and collapse the sidebar
- input.submit(
- begin_generation_ui,
- inputs=[agent_mode_enabled],
- outputs=[sidebar, generating_status],
- show_progress="hidden",
- ).then(
- generation_code_wrapper,
- inputs=[input, setting, history, current_model, language_dropdown, provider_state, agent_mode_enabled, agent_conversation_state],
- outputs=[code_output, history, history_output, chat_history, agent_conversation_state, sidebar]
- ).then(
- end_generation_ui,
- inputs=None,
- outputs=[sidebar, generating_status]
- ).then(
- # After generation, toggle editors for transformers.js and populate
- toggle_editors,
- inputs=[language_dropdown, code_output],
- outputs=[code_output, tjs_group, tjs_html_code, tjs_js_code, tjs_css_code, react_group, react_code_dockerfile, react_code_package_json, react_code_next_config, react_code_postcss_config, react_code_tailwind_config, react_code_pages_app, react_code_pages_index, react_code_components, react_code_styles]
- ).then(
- # After generation, toggle static multi-file editors for HTML
- toggle_static_editors,
- inputs=[language_dropdown, code_output],
- outputs=[
- code_output,
- static_group_2, static_group_3, static_group_4, static_group_5plus,
- static_tab_2_1, static_code_2_1, static_tab_2_2, static_code_2_2,
- static_tab_3_1, static_code_3_1, static_tab_3_2, static_code_3_2, static_tab_3_3, static_code_3_3,
- static_tab_4_1, static_code_4_1, static_tab_4_2, static_code_4_2, static_tab_4_3, static_code_4_3, static_tab_4_4, static_code_4_4,
- static_tab_5_1, static_code_5_1, static_tab_5_2, static_code_5_2, static_tab_5_3, static_code_5_3, static_tab_5_4, static_code_5_4, static_tab_5_5, static_code_5_5,
- ]
- ).then(
- # After generation, toggle Python multi-file editors for Gradio/Streamlit
- toggle_python_editors,
- inputs=[language_dropdown, code_output],
- outputs=[
- code_output, python_group_2, python_group_3, python_group_4, python_group_5plus,
- python_tab_2_1, python_code_2_1, python_tab_2_2, python_code_2_2,
- python_tab_3_1, python_code_3_1, python_tab_3_2, python_code_3_2, python_tab_3_3, python_code_3_3,
- python_tab_4_1, python_code_4_1, python_tab_4_2, python_code_4_2, python_tab_4_3, python_code_4_3, python_tab_4_4, python_code_4_4,
- python_tab_5_1, python_code_5_1, python_tab_5_2, python_code_5_2, python_tab_5_3, python_code_5_3, python_tab_5_4, python_code_5_4, python_tab_5_5, python_code_5_5
- ]
- ).then(
- show_deploy_components,
- None,
- [deploy_btn]
- )
-
- # --- Chat-based sidebar controller logic ---
- def _find_model_by_name(name: str):
- for m in AVAILABLE_MODELS:
- if m["name"].lower() == name.lower():
- return m
- return None
-
- def _extract_url(text: str) -> Optional[str]:
- import re
- match = re.search(r"https?://[^\s]+", text or "")
- return match.group(0) if match else None
-
-
- # Show deployment message when code or language changes
- def show_deployment_message(code, language, *args):
- if not code or not code.strip():
- return "Generate some code to see deployment options.
"
- return f"""
-
-
Ready to Deploy!
-
Your {language.upper()} code is ready for deployment.
-
👉 Use the Deploy button in the sidebar to publish your app!
-