chore: Add Visual Studio Code Web Support

Author: Avijit-Microsoft

README.md

@@ -85,9 +85,9 @@ For additional documentation of the default enabled services of this solution ac
 QUICK DEPLOY
 </h2>
 
-| [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/Deploy-Your-AI-Application-In-Production) | [![Open in Dev Containers](https://img.shields.io/static/v1?style=for-the-badge&label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/Deploy-Your-AI-Application-In-Production) |
-|---|---|
-[Steps to deploy with GitHub Codespaces](docs/github_code_spaces_steps.md)| [Steps to deploy with Dev Container](docs/Dev_ContainerSteps.md)
+| [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/microsoft/Deploy-Your-AI-Application-In-Production) | [![Open in Dev Containers](https://img.shields.io/static/v1?style=for-the-badge&label=Dev%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/microsoft/Deploy-Your-AI-Application-In-Production) | [![Open in Visual Studio Code Web](https://img.shields.io/static/v1?style=for-the-badge&label=Visual%20Studio%20Code%20(Web)&message=Open&color=blue&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/azure/?vscode-azure-exp=foundry&agentPayload=eyJiYXNlVXJsIjogImh0dHBzOi8vcmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbS9taWNyb3NvZnQvRGVwbG95LVlvdXItQUktQXBwbGljYXRpb24tSW4tUHJvZHVjdGlvbi9yZWZzL2hlYWRzL21haW4vaW5mcmEvdnNjb2RlX3dlYiIsICJpbmRleFVybCI6ICIvaW5kZXguanNvbiIsICJ2YXJpYWJsZXMiOiB7ImFnZW50SWQiOiAiIiwgImNvbm5lY3Rpb25TdHJpbmciOiAiIiwgInRocmVhZElkIjogIiIsICJ1c2VyTWVzc2FnZSI6ICIiLCAicGxheWdyb3VuZE5hbWUiOiAiIiwgImxvY2F0aW9uIjogIiIsICJzdWJzY3JpcHRpb25JZCI6ICIiLCAicmVzb3VyY2VJZCI6ICIiLCAicHJvamVjdFJlc291cmNlSWQiOiAiIiwgImVuZHBvaW50IjogIiJ9LCAiY29kZVJvdXRlIjogWyJhaS1wcm9qZWN0cy1zZGsiLCAicHl0aG9uIiwgImRlZmF1bHQtYXp1cmUtYXV0aCIsICJlbmRwb2ludCJdfQ==) |
+|---|---|---|
+[Steps to deploy with GitHub Codespaces](docs/github_code_spaces_steps.md)| [Steps to deploy with Dev Container](docs/Dev_ContainerSteps.md) | [Steps to deploy with VS Code Web](docs/vscode_web_steps.md) |
 
 
 ## Connect to and validate access to the new environment 

azure.yaml

@@ -15,13 +15,13 @@ hooks:
       continueOnError: false
     posix:
       shell: sh
-      run: sudo chmod u+r+x ./scripts/set_conns_env_vars.sh; sudo ./scripts/set_conns_env_vars.sh
+      run: bash ./scripts/set_conns_env_vars.sh
       interactive: true
       continueOnError: false
   preprovision:
     posix:
       shell: sh
-      run: sudo chmod u+r+x ./scripts/auth_init.sh; sudo ./scripts/auth_init.sh
+      run: bash ./scripts/auth_init.sh
       interactive: true
       continueOnError: false
     windows:
@@ -32,7 +32,7 @@ hooks:
   postprovision:
       posix:
         shell: sh
-        run: sudo chmod u+r+x ./scripts/process_sample_data.sh; sudo chmod u+r+x ./scripts/postprovision.sh; sudo ./scripts/postprovision.sh
+        run: bash ./scripts/postprovision.sh
         interactive: true
         continueOnError: false 
       windows:

docs/vscode_web_steps.md

@@ -0,0 +1,145 @@
+### VS Code Web
+
+You can run this solution using VS Code Web. The button will open a web-based VS Code instance in your browser:
+
+1. Open the project:
+
+    [![Open in Visual Studio Code Web](https://img.shields.io/static/v1?style=for-the-badge&label=Visual%20Studio%20Code%20(Web)&message=Open&color=blue&logo=visualstudiocode&logoColor=white)](https://insiders.vscode.dev/azure/?vscode-azure-exp=foundry&agentPayload=eyJiYXNlVXJsIjogImh0dHBzOi8vcmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbS9taWNyb3NvZnQvRGVwbG95LVlvdXItQUktQXBwbGljYXRpb24tSW4tUHJvZHVjdGlvbi9yZWZzL2hlYWRzL21haW4vaW5mcmEvdnNjb2RlX3dlYiIsICJpbmRleFVybCI6ICIvaW5kZXguanNvbiIsICJ2YXJpYWJsZXMiOiB7ImFnZW50SWQiOiAiIiwgImNvbm5lY3Rpb25TdHJpbmciOiAiIiwgInRocmVhZElkIjogIiIsICJ1c2VyTWVzc2FnZSI6ICIiLCAicGxheWdyb3VuZE5hbWUiOiAiIiwgImxvY2F0aW9uIjogIiIsICJzdWJzY3JpcHRpb25JZCI6ICIiLCAicmVzb3VyY2VJZCI6ICIiLCAicHJvamVjdFJlc291cmNlSWQiOiAiIiwgImVuZHBvaW50IjogIiJ9LCAiY29kZVJvdXRlIjogWyJhaS1wcm9qZWN0cy1zZGsiLCAicHl0aG9uIiwgImRlZmF1bHQtYXp1cmUtYXV0aCIsICJlbmRwb2ludCJdfQ==)
+
+3. VS Code Web window will open (may take a few minutes to load), Sign in with your Azure account when prompted.
+4. Select the subscription where you want to deploy the solution
+5. Wait for the environment to initialize (includes all deployment tools)
+6. Once the solution opens, the **AI Foundry terminal** will automatically start running the following command to install the required dependencies:
+
+    ```shell
+    sh install.sh
+    ```
+    During this process, you’ll be prompted with the message:
+    ```
+    What would you like to do with these files?
+    - Overwrite with versions from template
+    - Keep my existing files unchanged
+    ```
+    Choose “**Overwrite with versions from template**” and provide a unique environment name when prompted.
+5. Continue with the [deploying steps](#steps-to-provision-network-isolated-environment-using-dev-container).
+
+# Steps to Provision Network Isolated environment using Dev Container
+
+1. Log into your Azure subscription:
+
+   ```shell
+    azd auth login
+    ```
+
+   ![Image showing the entering of the command 'azd auth' in the terminal of VS Code](../img/provisioning/azdauthcommandline.png)
+
+   ![image showing the authorization window opening in the browser](../img/provisioning/azdauthpopup.png)
+
+   ![Image showing the password prompt for azure](../img/provisioning/enterpassword.png)
+
+2. Login to azure, run the below command: 
+    ```shell
+    az login --use-device-code
+     ```
+    The [Azure CLI](https://learn.microsoft.com/en-us/cli/azure/what-is-azure-cli?view=azure-cli-latest) is used by scripts that run during deployment. This will prompt you to select a subscription. Please select the appropriate subscription.
+
+   ![image showing theaz login in the vs code terminal](../img/provisioning/az_login.png)  
+
+3. Now start the deployment of the infrastructure by typing the below command:
+    ```shell
+    azd up
+    ```
+    > ⚠️ **Note:** The latest version of the Azure Developer CLI (AZD) is currently limited on prompting for missing parameters. The feature flag parameters in this solution have been temporarily defaulted to `'disabled'` until this limitation is lifted and prompting will resume.
+   
+
+   ![image showing the terminal in vs code](images/re_use_log/nonwaf.png)
+   
+   It will prompt you for the region to deploy the resources into as well as any additional Azure resources to be provisioned and configured.
+
+    **Important:** Be sure to remember the vm password. This will be used in a later step. You are still required to log into Azure once you connect through the virtual machine.
+    > ⚠️ **Note:**  
+    > 1. For **WAF Deployment**, Select the **Network Isolation** as **'True'**.  
+    > ![alt text](images/re_use_log/waf.png)  
+    > 2. For **Sample App Deployment**, Select the **appSampleEnabled** as **'True'**.  
+    > ![alt text](images/re_use_log/samapp.png)
+
+4. After completeing the required paramters that you were prompted for, the provisioning of resources will run and deploy the Network Isolated AI Foundry development portal and dependent resources in about 20-30 minutes.
+
+
+# Post Deployment Steps:
+These steps will help to check that the isolated environment was set up correctly.
+Follow these steps to check the creation of the required private endpoints in the environment (when set to networkIsolation = true).
+
+One way to verify whether access is private to the foundry is by launching Azure AI Foundry from the portal.
+
+![Image showing if network isolation is checked](images/re_use_log/AI_Foundry_Portal.png)
+
+When a user that is not connected through the virtual network via an RDP approved connection will see the following screen in their browser. This is the intended behavior! 
+
+![Image showing the virtual machine in the browser](images/re_use_log/AI_Foundry_view.png)
+
+A more thourough check is to look for the networking settings and checking for private end points.
+
+1. Go to the Azure Portal and select your Azure AI hub that was just created.
+
+2.	Click on Resource Management and then Networking.
+
+    ![Image showing the Azure Portal for AI Foundry Hub and the settings blade](images/re_use_log/Private_network_endpoints.png)
+
+
+    Here, you will find the private endpoints that are connected to the resources within the foundry managed virtual network. Ensure that these private endpoints are active.
+    The foundry should show that Public access is ‘disabled’.
+
+## Connecting to the isolated network via RDP
+1.	Navigate to the resource group where the isolated AI Foundry was deployed to and select the virtual machine.
+
+    ![Image showing the Azure Portal for the virtual machine](../img/provisioning/checkNetworkIsolation5.png)
+
+2.	Be sure that the Virtual Machine is running. If not, start the VM.
+
+    ![Image showing the Azure Portal VM and the start/stop button](../img/provisioning/checkNetworkIsolation6.png)
+
+3.	Select “Bastion” under the ‘Connect’ heading in the VM resource.
+
+    ![Image showing the bastion blade selected](../img/provisioning/checkNetworkIsolation7.png)
+
+4.	Supply the username and the password you created as environment variables and press the connect button.
+
+    ![Image showing the screen to enter the VM Admin info and the connect to bastion button](../img/provisioning/Bastion.png)
+
+5.	Your virtual machine will launch and you will see a different screen.
+
+    ![Image showing the opening of the Virtual machine in another browser tab](../img/provisioning/checkNetworkIsolation9.png)
+
+6.	Launch Edge browser and navigate to your Azure AI Foundry. https://ai.azure.com Sign in using your credentials.
+
+
+7.	You are challenged by MFA to connect.
+
+    ![Image showing the Multi Factor Authentication popup](../img/provisioning/checkNetworkIsolation10.png)
+
+8.	You will now be able to view the Azure AI Foundry which is contained in an isolated network.
+
+    ![Image showing the Azure Foundry AI Hub with a private bubble icon](images/re_use_log/Azure_ai_foundry_inside_vm.png)
+
+## Contributing
+
+This project welcomes contributions and suggestions. Most contributions require you to agree to a
+Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us
+the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.
+
+When you submit a pull request, a CLA bot will automatically determine whether you need to provide
+a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions
+provided by the bot. You will only need to do this once across all repos using our CLA.
+
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/).
+For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
+contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+
+## Trademarks
+
+This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft 
+trademarks or logos is subject to and must follow 
+[Microsoft's Trademark & Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks/usage/general).
+Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.
+Any use of third-party trademarks or logos are subject to those third-party's policies.

infra/vscode_web/.env

@@ -0,0 +1,7 @@
+AZURE_EXISTING_AGENT_ID="<%= agentId %>"
+AZURE_ENV_NAME="<%= playgroundName %>"
+# AZURE_LOCATION="<%= location %>"
+AZURE_SUBSCRIPTION_ID="<%= subscriptionId %>"
+AZURE_EXISTING_AIPROJECT_ENDPOINT="<%= endpoint %>"
+AZURE_EXISTING_AIPROJECT_RESOURCE_ID="<%= projectResourceId %>"
+AZD_ALLOW_NON_EMPTY_FOLDER=true

infra/vscode_web/.gitignore

@@ -0,0 +1,85 @@
+# ========== .NET ========== #
+## Build results
+bin/
+obj/
+[Bb]uild/
+[Ll]ogs/
+*.log
+## User-specific files
+*.user
+*.suo
+*.userosscache
+*.sln.docstates
+*.vsp
+*.vspx
+*.vspscc
+## Rider / VS Code / Visual Studio
+.idea/
+.vscode/
+.vs/
+## NuGet packages
+*.nupkg
+packages/
+*.snupkg
+project.lock.json
+project.assets.json
+## Dotnet tools
+.tools/
+# ========== Java ========== #
+## Compiled class files
+*.class
+## Logs
+*.log
+## Maven
+target/
+## Gradle
+.gradle/
+build/
+## Eclipse
+.project
+.classpath
+.settings/
+.loadpath
+## IntelliJ IDEA
+*.iml
+*.ipr
+*.iws
+out/
+.idea/
+# ========== Python ========== #
+## Byte-compiled / cache
+__pycache__/
+*.py[cod]
+*$py.class
+## Virtual environment
+env/
+venv/
+ENV/
+.venv/
+.env*
+## PyInstaller
+*.spec
+dist/
+build/
+## Jupyter Notebook
+.ipynb_checkpoints/
+## Misc
+*.log
+*.pot
+*.pyc
+.DS_Store
+*.sqlite3
+# ========== General ========== #
+## OS generated
+Thumbs.db
+ehthumbs.db
+Desktop.ini
+.DS_Store
+*.swp
+*.swo
+*.bak
+*.tmp
+*.old
+## Node (just in case mixed project)
+node_modules/
+# End

infra/vscode_web/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Microsoft Corporation.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

infra/vscode_web/README-noazd.md

@@ -0,0 +1,2 @@
+# VS Code for the Web - Azure AI Foundry Templates
+

infra/vscode_web/README.md

@@ -0,0 +1,43 @@
+# VS Code for the Web - Azure AI Foundry Templates
+
+We've generated a simple development environment for you to deploy the templates.
+
+The Azure AI Foundry extension provides tools to help you build, test, and deploy AI models and AI Applications directly from VS Code. It offers simplified operations for interacting with your models, agents, and threads without leaving your development environment. Click on the Azure AI Foundry Icon on the left to see more.
+
+Follow the instructions below to get started!
+
+You should see a terminal opened with the template code already cloned.
+
+## Deploy the template 
+
+You can provision and deploy this template using:
+
+```bash
+azd up
+```
+
+Follow any instructions from the deployment script and launch the application.
+
+
+If you need to delete the deployment and stop incurring any charges, run:
+
+```bash
+azd down
+```
+
+## Continuing on your local desktop
+
+You can keep working locally on VS Code Desktop by clicking "Continue On Desktop..." at the bottom left of this screen. Be sure to take the .env file with you using these steps:
+
+- Right-click the .env file
+- Select "Download"
+- Move the file from your Downloads folder to the local git repo directory
+- For Windows, you will need to rename the file back to .env using right-click "Rename..."
+
+## More examples
+
+Check out [Azure AI Projects client library for Python](https://github.com/Azure/azure-sdk-for-python/blob/main/sdk/ai/azure-ai-projects/README.md) for more information on using this SDK.
+
+## Troubleshooting
+
+- If you are instantiating your client via endpoint on an Azure AI Foundry project, ensure the endpoint is set in the `.env` as https://{your-foundry-resource-name}.services.ai.azure.com/api/projects/{your-foundry-project-name}`

infra/vscode_web/codeSample.py

@@ -0,0 +1,25 @@
+from azure.ai.projects import AIProjectClient
+from azure.identity import DefaultAzureCredential
+
+project_client = AIProjectClient.from_connection_string(
+    credential=DefaultAzureCredential(),
+    conn_str="<%= connectionString %>")
+
+agent = project_client.agents.get_agent("<%= agentId %>")
+
+thread = project_client.agents.create_thread()
+print(f"Created thread, ID: {thread.id}")
+
+message = project_client.agents.create_message(
+    thread_id=thread.id,
+    role="user",
+    content="<%= userMessage %>"
+)
+
+run = project_client.agents.create_and_process_run(
+    thread_id=thread.id,
+    agent_id=agent.id)
+messages = project_client.agents.list_messages(thread_id=thread.id)
+
+for text_message in messages.text_messages:
+    print(text_message.as_dict())

infra/vscode_web/endpoint-requirements.txt

@@ -0,0 +1,3 @@
+azure-ai-projects==1.0.0b12
+azure-identity==1.20.0
+ansible-core~=2.17.0