{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Tutorial 0: Using the SQuADDS Web UI\n",
    "\n",
    "Welcome to the SQuADDS WebUI! This tutorial will walk you through the main features of the web interface for querying, visualizing, and extracting superconducting qubit and device designs.\n",
    "\n",
    "To launch the web UI, run the following command:\n",
    "\n",
    "```bash\n",
    "streamlit run squadds/ui/app.py\n",
    "```\n",
    "\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 🎥 Quick Demo\n",
    "Below is a short .gif showing how to use the SQuADDS WebUI\n",
    "\n",
    "![SQuADDS WebUI Demo](https://raw.githubusercontent.com/LFL-Lab/SQuADDS/dev_palace/docs/_static/web_ui.gif)\n",
    "\n",
    "Link to the demo: [SQuADDS WebUI Demo](https://raw.githubusercontent.com/LFL-Lab/SQuADDS/dev_palace/docs/_static/web_ui.gif)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Step-by-Step Guide\n",
    "\n",
    "1. **System Configuration:**\n",
    "   - Select the system type (Qubit-Cavity, Qubit Only, or Cavity Only).\n",
    "   - Choose the qubit, cavity, and coupling types as needed.\n",
    "   - Set the resonator type and number of results.\n",
    "\n",
    "2. **Set Target Parameters:**\n",
    "   - Enter your desired frequencies, kappa, coupling strength, etc.\n",
    "\n",
    "3. **Find Designs:**\n",
    "   - Click the **Find Designs** button.\n",
    "   - The app will search the SQuADDS database for the closest matching designs.\n",
    "\n",
    "4. **Explore Results:**\n",
    "   - Use the tabs to view design parameters, parameter space plots, and detailed design options.\n",
    "   - For Qubit-Cavity, you can also view interpolated results.\n",
    "\n",
    "5. **Copy or Export:**\n",
    "   - Use the copy buttons to export design options for use in Qiskit Metal or other tools.\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## License\n",
    "\n",
    "<div style='width: 100%; background-color:#3cb1c2;color:#324344;padding-left: 10px; padding-bottom: 10px; padding-right: 10px; padding-top: 5px'>\n",
    "    <h3>This code is a part of SQuADDS</h3>\n",
    "    <p>Developed by Sadman Ahmed Shanto</p>\n",
    "    <p>This tutorial is written by Sadman Ahmed Shanto</p> \n",
    "    <p>&copy; Copyright Sadman Ahmed Shanto & Eli Levenson-Falk 2025.</p>\n",
    "    <p>This code is licensed under the MIT License. You may<br> obtain a copy of this license in the LICENSE.txt file in the root directory<br> of this source tree.</p>\n",
    "    <p>Any modifications or derivative works of this code must retain this<br>copyright notice, and modified files need to carry a notice indicating<br>that they have been altered from the originals.</p>\n",
    "</div>"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}