{"id":28562443,"url":"https://github.com/svf-tools/websvf","last_synced_at":"2025-07-31T11:35:29.484Z","repository":{"id":38992044,"uuid":"223851654","full_name":"SVF-tools/WebSVF","owner":"SVF-tools","description":"WebSVF : Online Learning and Teaching Platform for Code Analysis based on SVF","archived":false,"fork":false,"pushed_at":"2024-12-31T00:40:35.000Z","size":472582,"stargazers_count":15,"open_issues_count":16,"forks_count":13,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-31T01:26:38.455Z","etag":null,"topics":["code-analysis","static-analysis","svf","teaching-learning-platform"],"latest_commit_sha":null,"homepage":"https://svf-tools.github.io/WebSVF/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SVF-tools.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-11-25T03:15:02.000Z","updated_at":"2024-12-31T00:40:39.000Z","dependencies_parsed_at":"2023-12-06T01:34:42.908Z","dependency_job_id":"7c18047c-aaa5-4695-9549-491c631085f3","html_url":"https://github.com/SVF-tools/WebSVF","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SVF-tools%2FWebSVF","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SVF-tools%2FWebSVF/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SVF-tools%2FWebSVF/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SVF-tools%2FWebSVF/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SVF-tools","download_url":"https://codeload.github.com/SVF-tools/WebSVF/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SVF-tools%2FWebSVF/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259072837,"owners_count":22801086,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-analysis","static-analysis","svf","teaching-learning-platform"],"created_at":"2025-06-10T12:09:19.216Z","updated_at":"2025-06-10T12:09:19.956Z","avatar_url":"https://github.com/SVF-tools.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WebSVF\r\n\r\nThis is the WebSVF repo which highlights the static webSVF github io for redirecting to the deployed WebSVF pages\r\n  https://svf-tools.github.io/WebSVF/\r\n\r\nCapstone Project for the WebSVF can be found within this Repo as a sub module\r\nlearn more about submodules at https://git-scm.com/book/en/v2/Git-Tools-Submodules \r\n\r\nFor a quick introduction to the latest addition in WebSVF 4.0, the CodeGPT panel, please have a watch of this video:\r\nhttps://www.youtube.com/watch?v=Gf6vAyzOlJ0\r\nThe new feature allows users to communicate with OpenAI's GPT 3.5-Turbo engine, and attach any of their files present on the site!\r\n\r\nTo see the new features of WebSVF 5.0, please have a watch of this video:\r\n\r\n## WebSVF 5.0 Final Video\r\n\r\nFull Video: https://youtu.be/EGwzPoHQUzM\r\n\r\nSlides: https://www.canva.com/design/DAGVJAkBxYs/MSXLoiYFYhyO_qh1qxGCrA/edit?utm_content=DAGVJAkBxYs\u0026utm_campaign=designshare\u0026utm_medium=link2\u0026utm_source=sharebutton\r\n\r\nhttps://github.com/user-attachments/assets/86be6ae2-ee34-42c5-89d2-f73ca2fa4a3c\r\n\r\n## Middle term video of WebSVF 5.0\r\nFull Video: https://youtu.be/0xt0WGAFV5M\r\n\r\nSlides: https://www.canva.com/design/DAGNPdIVvZE/CcezXWfi-C7VX7TTSFeaZA/edit?utm_content=DAGNPdIVvZE\u0026utm_campaign=designshare\u0026utm_medium=link2\u0026utm_source=sharebutton\r\n\r\nhttps://github.com/user-attachments/assets/f0e16e53-2d5a-4691-bb23-fb603b7ea9da\r\n\r\n# User Guide\r\nWebSVF 5.0 allows users to enter their C code and analyse it using SVF tools. Users can ask CodeGPT in a chat like manner for help in understanding the different graphs, LLVM IR and how to fix  bugs detected by SVF tools.\r\n\r\n## Compile Options\r\nUsers can select compile options to run. These compile option flags will be added when compiling the code using clang.\r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/compileOptions.png)\r\n## Selecting executable options\r\nUsers can select SVF executables to run their C code on.\r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/executables.png)\r\n## Graph features\r\n### Display graphs\r\nAll graphs produced by the executables will show under the graphs section. Users can select the graph they want to view\r\n\r\n### Node background colours\r\nNodes in the graph will have a background colour if they have a corresponding line of code in the code editor. The background colour of the line of code and the corresponding node will be the same to help users identify correlations. \r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/nodeCodeHighlight.png)\r\n\r\n### Clicking on nodes\r\nWhen user clicks on a node and the node has a corresponding line of code, it will set the line of code into view and set the text of the line of code to a red colour.\r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/codeSelectedThroughNode.png)\r\n### Reset Zoom\r\nUsers can click on the reset zoom button to set the zoom and view back to default settings.\r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/resetZoom.png)\r\n\r\n### Freely zoom and move\r\nUsers can freely move and zoom along the graph viewer.\r\n## Terminal Output\r\n### Display terminal output of executables\r\nThe terminal output section display terminal out from all the executables\r\n\r\n### Shows compile error messages\r\nIf there are any compile errors or warnings, the executables will not run. It will return the error and warning messages which can be seen under terminal output. \r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/clangErrors.png)\r\n## LLVMIR\r\nThe LLVMIR shows the LLVMIR generated by clang and used by the executables. It has syntax highlighting to help users discern functions, variables, if conditions, loops etc.\r\n\r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/LLVMSyntaxHighlighting.png)\r\n## Code Editor\r\nThe code editor is a monacco code editor which is the same editor used in Visual Studio code.\r\n\r\n### Background colour line of code \r\nIf a line of code has a corresponding node in the current selected graph, the line of code will have the same background colour as the corresponding node.\r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/nodeCodeHighlight.png)\r\n\r\n\r\n### Clicking on line of code graph interaction\r\nWhen user clicks on line of code and line of code has a corresponding node on graph, it will change the text colour of the corresponding node on the graph to red. \r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/nodeSelectedThroughCode.png)\r\n\r\n### Display error messages and warning messages\r\nIf there are any error messages or warning messages from clang or the executables, it will display it on the corresponding line of code in the code editor. Users can identify these errors and warnings on the code editor by looking for red underlines to the the line of code similar to Visual studio code. \r\n\r\n### AskCodeGPT Shortcut\r\nIf a line of code has a error or warning messages, users can hover and click on quick fix and then ask CodeGPT. This will make an automatic prompt to CodeGPT to help users understand the bug and how to fix it. The prompts made specific to the bug. That is, the prompt will specify to CodeGPT is the bug is a memory leak, buffer overflow or a clang compiler error. \r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/AskCodeGPT.png)\r\n## CodeGPT\r\nCodeGPT allows users to ask questions about the code, graphs, terminal output and LLVM IR in a chat like manner.\r\n\r\n### Categorised Prompts\r\nUsers can select ready made prompts based on the categories code, graphs, terminal output and LLVM IR. \r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/askCodeGPTCategorisedPrompts.png)\r\n\r\n## Save and share sessions\r\nUsers can save and share their coding sessions on WebSVF by clicking on the share button and copying the generated link. The generated link will save the users compile options, executable options and C code. When the user enters the link, it will restore the saved configurations.\r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/shareableLink.png)\r\n\r\n## Font Size\r\nUsers can change the font size in the code editor, terminal output and LLVMIR using the increment button or the dropdown menu.\r\n![](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/fontSize.png)\r\n\r\n## Light and Dark mode\r\nUsers can select light and dark mode using the toggle in the top right section.\r\n![Dark Mode](https://github.com/joshua-sy/capstoneProject2024/blob/main/wikiImages/darkMode.png)\r\n\r\n\r\n\r\n# Installation of webSVF 5.0\r\nNote, webSVF 5.0 uses svf-ex executable from previous webSVF to create graphs. The executable can only run in x86 architecture (not arm64). Installation should be completed on linux for best results.\r\n\r\n# Downloading dotnet 8 on Linux\r\nGo to this website\r\n```\r\nhttps://dotnet.microsoft.com/en-us/download/dotnet/8.0\r\n```\r\n\r\nDownload sdk for dotnet 8.0. Click on x64 for binaries if using x64 architecture. Click arm64 if running on M-series macbook. This should automatically download the binary as a tar file.\r\n```\r\ncd Downloads\r\n```\r\nGo into downloads and run the following commands. (These commands were taken from the download page)\r\n\r\n```\r\nmkdir -p $HOME/dotnet \u0026\u0026 tar zxf dotnet-sdk-8.0.402-linux-x64.tar.gz -C $HOME/dotnet\r\nexport DOTNET_ROOT=$HOME/dotnet\r\nexport PATH=$PATH:$HOME/dotnet\r\n```\r\n\r\nRun the 2 export commands every time you open up a new terminal session. You could also edit the your shell profile to permanently add the commands. \r\n\r\n# Downloading node manager for frontend\r\n\r\nInstall Node Version Manager (nvm) by running the following command\r\n```\r\ncurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash\r\n```\r\n\r\nInstall Node version 20 by running following command\r\n```\r\nnvm install 20\r\n```\r\n\r\nYou can check the node version by running following command. It should say v20.*.*\r\n```\r\nnode -v\r\n```\r\n\r\n# How to run frontend locally\r\nGo into frontend folder\r\n```\r\ncd frontend\r\n```\r\nInstall node packages needed to run frontend by using the following command.\r\n```\r\nnpm install\r\n```\r\nRun npm run dev\r\n```\r\nnpm run dev\r\n```\r\n\r\n# How to run backend locally\r\nUser needs to have dotnet 8 to run the backend locally.\r\n\r\nGo into api folder\r\n```\r\ncd api\r\n```\r\n\r\nRun dotnet run\r\n```\r\ndotnet run\r\n```\r\n\r\n\r\n# Backend Deployment\r\nWebSVF 5.0 is currently deployed using fly.io\r\n1. Create an account using fly.io. Note, you may need to enter credit card details to use fly.io as it is a pay as you go service.\r\n\r\n2. Install fly.io command line flyctl. Setup guide can be found here: https://fly.io/docs/flyctl/install/\r\n\r\n3. Go into the api folder\r\n```\r\ncd api\r\n```\r\n\r\n4. Run the fly launch command line and specify the docker file path under the api folder. Fly.io will use the docker file to deploy and run the dotnet backend application. It should create a fly.toml file, a configuration file for fly.io. \r\n\r\n```\r\nfly launch --dockerfile Dockerfile\r\n```\r\n\r\n5. Run fly deploy to deploy the application. Use the fly deploy command if you make changes to the backend or docker file so that these changes can be applied to the deployed application. \r\n\r\n```\r\nfly deploy\r\n```\r\n\r\n\r\n\r\n\r\n# Frontend Deployment\r\nFrontend is currently deployed using Vercel.\r\nThe frontend can be deployed using Vercel.\r\n\r\n1. Create a Vercel account and link github account to Vercel. The github account should have the forked capstone project repo.\r\n\r\n2. Click add new in the dashboard. Then click Project.\r\n\r\n3. Under your github account, import the forked report.\r\n\r\n4. You should now be under new project where you can configure settings before deployment.\r\n      -  Set a project name (up to your choice)\r\n      -  Set framework preset to Vite\r\n      -  Set Root Directory to frontend\r\n5. Click Deploy. Vercel should now start building website.\r\n\r\n# API Key\r\nIf you want to change the API key for codeGPT or come across the error 'apiKey' does not exist.\r\n\r\nAdd the APIKey to a .env.sh file inside frontend folder and outside of src. Add the following to the env file.\r\n```\r\nVITE_OPENAI_API_KEY='YOUR_API_KEY'\r\n```\r\n\r\nTo generate the API key, you will need to:\r\n1. create an account with OpenAI.\r\n2. After logging in, select 'API'.\r\n3. Click on the GPT icon in the top left corner to expand the sidebar\r\n4. Select API Keys. Here, you can generate a key and add it as the value to the apiKey variable.\r\n\r\n\r\nEND OF WEBSVF 5.0 INSTALLATION\r\n\r\n\r\n# Installation guide for WebSVF 4.0\r\nNote: Installation should be completed on linux for best results.\r\n\r\n## 1. Install Nodejs 15 and other dependancies\r\n```\r\nsudo apt install nodejs@15\r\nsudo apt-get install clang cmake gcc g++ doxygen graphviz zlib1g-dev unzip libtinfo5\r\n```\r\nhttps://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04\r\n\r\n## 2. Install Angular\r\n```\r\ncd ClientApp \\\r\nsudo npm install -g @angular/cli\r\n```\r\nhttps://angular.io/guide/setup-local\r\n\r\n## 3. Clone this repo\r\n```\r\ngit clone https://github.com/Re-Tails/CapstoneProject.git\r\n```\r\n\r\n## 4. Install Dotnet\r\n\r\n### Add the Microsoft package signing key\r\n```\r\nwget https://packages.microsoft.com/config/ubuntu/20.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb\r\nsudo dpkg -i packages-microsoft-prod.deb\r\nrm packages-microsoft-prod.deb\r\n```\r\n\r\n### Install the SDK\r\n```\r\nsudo apt-get update; \\\r\n  sudo apt-get install -y apt-transport-https \u0026\u0026 \\\r\n  sudo apt-get update \u0026\u0026 \\\r\n  sudo apt-get install -y dotnet-sdk-3.1\r\n```\r\n\r\n### Install the runtime\r\n```\r\nsudo apt-get update; \\\r\n  sudo apt-get install -y apt-transport-https \u0026\u0026 \\\r\n  sudo apt-get update \u0026\u0026 \\\r\n  sudo apt-get install -y aspnetcore-runtime-3.1\r\n```\r\nhttps://docs.microsoft.com/en-au/dotnet/core/install/linux-ubuntu#2004-\r\n\r\n### If the above commands do not work, you can manually download Dotnet 3.1 here\r\n\r\nYou can download any version as long as it is 3.1 version of SDK.\r\n\r\nhttps://dotnet.microsoft.com/en-us/download/dotnet/3.1\r\n\r\nAfter downloading, go to downloads folder and run the following commands.\r\n```\r\ncd\r\ncd Downloads\r\nmkdir -p $HOME/dotnet \u0026\u0026 tar zxf dotnet-sdk-3.1.302-win-x64.exe -C $HOME/dotnet\r\nexport DOTNET_ROOT=$HOME/dotnet\r\nexport PATH=$PATH:$HOME/dotnet\r\n```\r\n\r\nIf you have downloaded manually, you will need to run these commands everytime the machine is restarted (or add these commands to appropriate source file to avoid copy and pasting this command when computer restarts)\r\n```\r\nexport DOTNET_ROOT=$HOME/dotnet\r\nexport PATH=$PATH:$HOME/dotnet\r\n```\r\n\r\n## 7. Update the app\r\n```\r\ncd  ClientApp \\\r\nnpm install \\\r\nnpm run start //note: this will only run the Client App\r\n```\r\n## 6. Run the app\r\nRun the following command from the CapstoneProject repo folder:\r\n```\r\ndotnet run\r\n```\r\n\r\n# Notes\r\n\r\n## Install dependencies\r\nInstall the following dependencies if required\r\n```\r\nnpm i svf-lib\r\n```\r\n## Pulling the submodule from CapstoneProject\r\nThis command is be required to retrieve the latest files within CapstoneProject or any other repo you add.\r\n```\r\ngit submodule update --init\r\n```\r\n\r\n## Create EC2 instance from custom WebSVF AMI\r\n\r\nThese instructions are adapted from official AWS documentation (sources listed below).\r\n\r\nIt is highly recommended you read through the sources in detail if you're unfamiliar with the AWS environment, especially with AWS EC2.\r\n\r\nWebSVF AMI: `ami-06787f758a0b88e83`\r\n### 1a. Sign up for an AWS account\r\nIf you do not have an AWS account, complete the following steps to create one.\r\n\r\nTo sign up for an AWS account\r\n1. Open https://portal.aws.amazon.com/billing/signup.\r\n\r\n2. Follow the online instructions.\r\n\r\nPart of the sign-up procedure involves receiving a phone call and entering a verification code on the phone keypad.\r\n\r\nWhen you sign up for an AWS account, an AWS account root user is created. The root user has access to all AWS services and resources in the account. As a security best practice, assign administrative access to an administrative user, and use only the root user to perform tasks that require root user access.\r\n\r\nAWS sends you a confirmation email after the sign-up process is complete. At any time, you can view your current account activity and manage your account by going to https://aws.amazon.com/ and choosing My Account.\r\n\r\n### 1b. Login to AWS account\r\nLogin to your AWS account through the [AWS Management Console](https://aws.amazon.com/console/).\r\n\r\n### 2. Create a key pair\r\n1. Open the Amazon EC2 console at https://console.aws.amazon.com/ec2/.\r\n\r\n2. In the navigation pane, choose `Key Pairs`.\r\n\r\n3. Choose `Create key pair`.\r\n\r\n4. For `Name`, enter a descriptive name for the key pair. Amazon EC2 associates the public key with the name that you specify as the key name.\r\n\r\n5. For Key pair type, choose `RSA`\r\n\r\n6. For `Private key file format`, choose the format in which to save the private key.\r\n\r\n7. Choose `Create key pair`.\r\n\r\n8. The private key file is automatically downloaded by your browser. The base file name is the name you specified as the name of your key pair, and the file name extension is determined by the file format you chose. Save the private key file in a safe place.\r\n### 3. Access Amazon EC2\r\nOpen the Amazon EC2 console at https://console.aws.amazon.com/ec2/\r\n\r\n### 4. Launch EC2 instance\r\n1. From the EC2 console dashboard, in the `Launch instance` box, choose `Launch instance`, and then choose `Launch instance` from the options that appear.\r\n\r\n2. Under `Name and tags`, for `Name`, enter a descriptive name for your instance.\r\n\r\n3. Under `Application and OS Images (Amazon Machine Image)`, do the following:\r\n\r\n   - Choose Quick Start, and then choose Amazon Linux. This is the operating system (OS) for your instance.\r\n\r\n   - From Amazon Machine Image (AMI), choose Browse more AMIs to browse the full AMI catalog.\r\n\r\n   - Choose Community AMIs\r\n\r\n   - Search for the AMI `ami-06787f758a0b88e83`\r\n\r\n   - Select it\r\n\r\n4. Under Key pair (login), for Key pair name, choose the key pair that you created when getting set up.\r\n\r\n5. Review a summary of your instance configuration in the `Summary` panel, and when you're ready, choose `Launch instance`.\r\n\r\n## Troubleshoot\r\n\r\n### No usable version of libssl was found error\r\nIf this error occurs, there should be a libssl1.1_1.1.1-1ubuntu2.1~18.04.21_amd64.deb that can be installed by running the following command.\r\n\r\n```\r\nsudo dpkg -i libssl1.1_1.1.1-1ubuntu2.1~18.04.21_amd64.deb\r\n```\r\n\r\nIf this libssl file is not here, you can run the following commands\r\n```\r\nwget https://www.openssl.org/source/openssl-1.1.1c.tar.gz\r\ntar -xzvf openssl-1.1.1c.tar.gz\r\ncd openssl-1.1.1c\r\n./config\r\nmake\r\nsudo make install (it puts it into /usr/local/lib so it doesn't mess with the rest of your system)\r\n```\r\nThen, run this command to map this command temporarily via LD_LIBRARY_PATH. You will need to run this command everytime the computer restarts.\r\n\r\n```\r\nexport export LD_LIBRARY_PATH=\"/usr/local/lib\"\r\n```\r\nSource for no usable libssl if there is no libssl file.\r\nhttps://github.com/dotnet/core/issues/4749 \r\n\r\n### API Key\r\nIf you want to change the API key for codeGPT or come across the error 'apiKey' does not exist.\r\n\r\nAdd the APIKey in environment.ts (clientApp-\u003esrc/environments-\u003eenvironments.ts).\r\n\r\nTo generate the API key, you will need to:\r\n1. create an account with OpenAI.\r\n2. After logging in, select 'API'.\r\n3. Click on the GPT icon in the top left corner to expand the sidebar\r\n4. Select API Keys. Here, you can generate a key and add it as the value to the apiKey variable.\r\n\r\nAn alternative method can also be to use a dotenv file, you can find some documentation on this here. This will allow you to secure the API keys over public repositories.\r\nhttps://betterprogramming.pub/how-to-secure-angular-environment-variables-for-use-in-github-actions-39c07587d590\r\n\r\n## Sources\r\n\r\nhttps://docs.aws.amazon.com/cli/latest/userguide/cli-services-ec2-instances.html\r\n\r\nhttps://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html\r\n\r\nhttps://docs.aws.amazon.com/AWSEC2/latest/UserGuide/get-set-up-for-amazon-ec2.html\r\n\r\nhttps://docs.aws.amazon.com/AWSEC2/latest/UserGuide/EC2_GetStarted.html\r\n\r\nhttps://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ec2-launch-instance-wizard.html\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvf-tools%2Fwebsvf","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvf-tools%2Fwebsvf","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvf-tools%2Fwebsvf/lists"}