Deploy career conversations agent app on own website/blog

1_foundations/community_contributions/1_lab_1_deploy_app_online.ipynb

@@ -0,0 +1,72 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "6e1668d5",
+   "metadata": {},
+   "source": [
+    "### Week1 Project\n",
+    "### Quick tips on how to deploy the career_conversations app.py (Chatbot) on your own website/blog/portfolio to showcase\n",
+    "\n",
+    "This is for those who have control of their website and can modify, build, and redeploy the index.html file.\n",
+    "\n",
+    "Here is mine (Scroll at the bottom page to see where I embedded the Career Conversation component in my website):\n",
+    "\n",
+    "https://imouiche.github.io/Mouichify/\n",
+    "\n",
+    "Sorry! my website is still under development, but the idea is there :) \n",
+    "\n",
+    "1- The first is to host your app on Hugging Face (HF) space as taught in class/week1\n",
+    "\n",
+    "2- After step1 above, you'll have the HF link to your deplyed app (e.g. https://inoussa-guru-career-conversations.hf.space).\n",
+    "\n",
+    "3- We'll use this link to embed the web component into our website (index.html). This approach offers a better experience than IFrame as it does not slow down the loading time and the UI automatically adjusts its height based on the size of the Gradio app.\n",
+    "\n",
+    "4- Open the index.html and create a new section/component where you'd like to add the chatbot to answer your career questions from the visitors. Below is a simple section I created for my case. Make sure to replace 5.49.2 in the Gradion S3 URL with the library version of Gradio you are using.\n",
+    "``` html\n",
+    "==============================================================\n",
+    "<section class=\"block\" data-aos=\"zoom-in\">\n",
+    "    <header class=\"block__header\">\n",
+    "        <h2>Career Conversations</h2>\n",
+    "        <p>\n",
+    "          Feel free to ask any questions about my career in the chat.\n",
+    "        </p>\n",
+    "    </header>\n",
+    "        <div class=\"container\">\n",
+    "            <script\n",
+    "        \ttype=\"module\"\n",
+    "        \tsrc=\"https://gradio.s3-us-west-2.amazonaws.com/5.34.2/gradio.js\"\n",
+    "          ></script>\n",
+    "            <gradio-app src=\"https://inoussa-guru-career-conversations.hf.space\"></gradio-app>\n",
+    "        </div>\n",
+    "</section>\n",
+    "================================================================================\n",
+    "```\n",
+    "https://imouiche.github.io/Mouichify/\n",
+    "\n",
+    "  <img src=\"career_chatbot_image.png\"/>\n",
+    "\n",
+    "### Read more:\n",
+    "- Check how to deploy apps with Gradio via the following link:\n",
+    "\n",
+    "https://www.gradio.app/guides/sharing-your-app#hosting-on-hf-spaces\n",
+    "\n",
+    "- Host a website on GitHub\n",
+    "\n",
+    "https://www.youtube.com/watch?v=e5AwNU3Y2es\n",
+    "\n",
+    "\n",
+    "Reach out if you have any questions:\n",
+    "\n",
+    "https://www.linkedin.com/in/inoussa-mouiche-b5b5138b/"
+   ]
+  }
+ ],
+ "metadata": {
+  "language_info": {
+   "name": "python"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}