Upload 14 files

.gitattributes

@@ -1,36 +1,4 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
-Images/logo.png filter=lfs diff=lfs merge=lfs -text
+# Auto detect text files and perform LF normalization
+* text=auto
+Blockchain.zip filter=lfs diff=lfs merge=lfs -text
+images/logo.png filter=lfs diff=lfs merge=lfs -text

Attachments/readme.md

@@ -0,0 +1,2 @@
+## Purpose
+This directory can be used to retain any materials relevant and necessary for the project history.  These materials are retained here so they are available for collaboration and version control.

Blockchain.zip

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3e50c6d8618fb91368da26307e049bba6fa559c700aa51f393c41a214ad0757d
+size 120774318

README.md

@@ -1,11 +1,39 @@
----
-title: SurveyBuilder
-emoji: 🦀
-colorFrom: purple
-colorTo: blue
-sdk: static
-pinned: false
-short_description: Survey Builder Web App
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# CSE Capstone Project Template
+
+
+This begins your capstone development effort.  You will use GitLab as your primary repository for code and documentation.  In these early phases, you may not be delivering 'working software' but you will be delivering just enough documentation to show an understanding of the product in order to communicate a high-level understanding of the product, objectives, scope and quality requirements.  The issues and boards can also be used to collaborate on research.  For those of you on an R&D project, issues are a great way to track each research question.  The comments and team collaboration build a large body of knowledge during your efforts. 
+
+Regarding this readme.md file, ultimately you will update this page to reflect your project and assist anyone who has access to your repository.
+
+
+# Read these articles
+Read the following articles to familiarize yourself with Gitlab and how you will be expected to use it during your project.
+
+* [How to use GitLab for Agile Software Development](https://about.gitlab.com/blog/2018/03/05/gitlab-for-agile-software-development/). 
+* [How to Write a Beautiful and Meaningful README.md*](https://blog.bitsrc.io/how-to-write-beautiful-and-meaningful-readme-md-for-your-next-project-897045e3f991#:~:text=It's%20a%20set%20of%20useful,github%20below%20the%20project%20directory.) - buidling your ReadMe file 
+* [Always start with an issue](https://about.gitlab.com/blog/2016/03/03/start-with-an-issue/) - This article discusses issues and how to use them to collaborate.  Several issue and merge templates are provided in the .gitlab/issue_templates and .gitlab/merge_request_templates.  These should facilitate collaboration and quality. Feel free to edit them to fit the needs of this project.
+* [Template Samples](https://gitlab.com/gitlab-org/gitlab/-/tree/master/.gitlab/issue_templates)
+
+
+# Time Tracking
+
+Time tracking is NOT required.  It's very simple though.  There are other useful actions like /done, /assign, /approve and /wip to name a few.
+
+| cmd | purpose |
+| ------ | ------ |
+| /estimate | in the issue description, document the initial work estimate in days, hours, or minutes |
+| /spend | in the comments for the issue, indicate how much time you spend working at that time | 
+
+Here's the link to [Quick Actions](https://docs.gitlab.com/ee/user/project/quick_actions.html).  
+
+# Branches
+
+This project templates includes 2 branches to start with.  
+
+| **Name**   | **Description** |
+| ------ | ------ |
+| Master         | Protected branch.  You cannot push directly to master.  This branch should be what you push to your test server (ceclnx for example) or other devices for your client to review. |
+| . . .          | Thereafter, you should follow the code management strategy defined and agreed upon by the team.  I recommend a branch from master for each sprint or interval.  From the sprint-branch, I recommend branching by issue.  Throughout the sprint, rebase your issue branch regularly especially begore a commit.  If an issue is incomplete during the prescribed sprint, commit it to the next spring branch.  This approach gives the master branch an additional degree of protection. |
+
+ 
+

aboutUs.html

@@ -39,16 +39,17 @@
             </div>
         </div>
     </nav>
+    <div class="container mt-5" style="background-color: #ffffff;">
 
     <!-- Tall, Narrow Header Section -->
-    <header class="bg-light text-center py-5">
+    <header class="text-center py-5" style="background-color: #ffffff;">
         <div class="container">
             <h1 class="display-4 text-primary">About Us</h1>
         </div>
     </header>
 
     <!-- Mission Section -->
-    <div class="bg-light container mt-5">
+
         <section class="text-center mb-4">
             <h2 class="text-primary">Our Mission</h2>
             <p>Our mission is to empower users to build custom surveys with ease and flexibility, deploying them
@@ -98,12 +99,12 @@
         </section>
 
         <!-- Meet the Team Section with Gray Background -->
-        <section class="bg-light py-5">
+        <section class="py-5" style="background-color: #ffffff;">
             <h2 class="text-primary text-center mb-5">Meet the Team</h2>
             <div class="row">
                 <div class="col-md-3 text-center">
                     <div class="card border-0 bg-light">
-                        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                        <img src=""
                             class="card-img-top rounded-circle mx-auto mt-3" style="width: 150px;" alt="Team Member 1">
                         <div class="card-body">
                             <h5 class="card-title">AJ Anastasia</h5>

dragAndDrop.html

@@ -93,8 +93,8 @@
                         <div class="modal fade" id="exportModal" tabindex="-1" aria-labelledby="exportModalLabel" aria-hidden="true">
                             <div class="modal-dialog">
                                 <div class="modal-content">
-                                    <div class="modal-header">
-                                        <h5 class="modal-title" id="exportModalLabel">Export Survey</h5>
+                                    <div class="modal-header no-drag">
+                                        <h5 class="modal-title no-drag" id="exportModalLabel">Export Survey</h5>
                                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                     </div>
                                     <div class="modal-body">
@@ -112,7 +112,7 @@
                             <div class="modal-dialog">
                                 <div class="modal-content">
                                     <div class="modal-header">
-                                        <h5 class="modal-title" id="githubModalLabel">GitHub Upload Details</h5>
+                                        <h5 class="modal-title no-drag" id="githubModalLabel">GitHub Upload Details</h5>
                                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                     </div>
                                     <div class="modal-body">
@@ -138,7 +138,7 @@
                             <div class="modal-dialog">
                                 <div class="modal-content">
                                     <div class="modal-header">
-                                        <h5 class="modal-title" id="hfModalLabel">Hugging Face Upload Details</h5>
+                                        <h5 class="modal-title no-drag" id="hfModalLabel">Hugging Face Upload Details</h5>
                                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                     </div>
                                     <div class="modal-body">
@@ -150,6 +150,14 @@
                                             <label for="access-token-hf" class="form-label">Access Token (Tokens will not be saved)</label>
                                             <input type="text" id="access-token-hf" class="form-control" placeholder="Enter your Hugging Face access token">
                                         </div>
+                                        <div class="mb-3">
+                                            <label for="sepolia-url" class="form-label">Sepolia URL (Project ID)</label>
+                                            <input type="text" id="sepolia-url" class="form-control" placeholder="Enter your Sepolia URL">
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="pk" class="form-label">Private Key</label>
+                                            <input type="text" id="pk" class="form-control" placeholder="Enter your Private Key">
+                                        </div>
                                         <div class="alert alert-warning" role="alert">
                                             ⚠ Warning: Files with the name <b>app.py</b> will be overwritten
                                         </div>
@@ -159,6 +167,28 @@
                             </div>
                         </div>
 
+                        <div class="modal fade" id="localModal" tabindex="-1" aria-labelledby="localModalLabel" aria-hidden="true">
+                            <div class="modal-dialog">
+                                <div class="modal-content">
+                                    <div class="modal-header">
+                                        <h5 class="modal-title" id="localModalLabel">Local Download Details</h5>
+                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                    </div>
+                                    <div class="modal-body">
+                                        <div class="mb-3">
+                                            <label for="sepolia-url" class="form-label">Sepolia URL (Project ID)</label>
+                                            <input type="text" id="sepolia-url" class="form-control" placeholder="Enter your Sepolia URL">
+                                        </div>
+                                        <div class="mb-3">
+                                            <label for="pk" class="form-label">Private Key</label>
+                                            <input type="text" id="pk" class="form-control" placeholder="Enter your Private Key">
+                                        </div>
+                                        <button id="submit-upload-local" class="btn btn-primary w-100">Submit&nbsp; <span id="loading-spinner-local" class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span></button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
                         
 
                         <!-- Button to open Import modal -->

dragDrop.css

@@ -255,6 +255,15 @@ main {
     cursor: move;
 }
 
+.link-like {
+    all: unset; /* Remove all default button styles */
+    color: #0d6efd; /* Bootstrap blue */
+    text-decoration: underline;
+    cursor: pointer;
+    font: inherit; /* Match surrounding text */
+    vertical-align: baseline; /* Align with text */
+  }
+
 /* Apply the move cursor only to the handle */
 .handle {
     cursor: move;

dragdrop.js

@@ -388,6 +388,7 @@ document.getElementById('save-survey').addEventListener('click', () => {
 });
 
 // Event listener for local download
+// Prompts the user to enter their sepolia URL and private key
 document.getElementById('download-btn').addEventListener('click', () => {
     const surveyPythonCode = buildSurveyPythonCode(); // Get Python survey code
     downloadSurvey(surveyPythonCode); // Trigger local download
@@ -674,7 +675,7 @@ function formatFinalPageCode(questions, pageCount) {
     pythonCode += `    if st.session_state["disabled"]:\n`;
     pythonCode += '        with st.spinner(r"$\\textsf{\\normalsize Storing data on IPFS and Ethereum. This operation might take a few minutes. Please wait to receive your confirmation code!}$"):\n';
     pythonCode += `            try:\n`;
-    pythonCode += `                response = {'file': json.dumps({\n`;
+    pythonCode += `                response = {\n`;
     let questionNumber = 1;
     questions.forEach((question) => {
         let questionType = question.querySelector('strong').textContent.replace(' Question', '');
@@ -687,7 +688,8 @@ function formatFinalPageCode(questions, pageCount) {
             questionNumber++;
         }
     });
-    pythonCode += `                })}\n`
+    pythonCode += `                }\n`
+    pythonCode += `                submission(response)\n`
 
     pythonCode += `            except Exception as e:\n`;
     pythonCode += `                print(e)\n`;
@@ -779,7 +781,6 @@ function formatPostCode(questionIndices, questions, pageIndex) {
         pythonCode += '                st.warning("Please answer all the questions on this page.", icon="⚠️")\n\n';
 
         pythonCode += '    st.progress(st.session_state["current_page"]/total_number_pages, text="Progress")\n\n\n';
-        
     }
 
     return pythonCode;
@@ -806,8 +807,105 @@ function formatPreCode(questions) {
     // Add necessary imports
     pythonCode += `import streamlit as st\nimport requests\nimport json\nimport web3\n\n`;
 
-    
+    pythonCode += 'abi = [{"anonymous":False,"inputs":[{"indexed":False,"internalType":"string","name":"ipfsHash","type":"string"}],"name":"Store","type":"event"},{"inputs":[],"name":"getHashes","outputs":[{"internalType":"string[]","name":"","type":"string[]"}],"stateMutability":"view","type":"function"},{"inputs":[{"internalType":"string","name":"ipfsHash","type":"string"}],"name":"storeHash","outputs":[],"stateMutability":"nonpayable","type":"function"}]\n'
+    pythonCode += `# function that uploads the results to ipfs
+def upload_json_to_ipfs(data):
+    try:
+        url = "https://api.pinata.cloud/pinning/pinJSONToIPFS"
+
+        print("starting upload to ipfs")
+
+        # check for JWT secret
+        if "PinataJWT" not in st.secrets:
+            st.write("No JWT secret found, please add your JWT in a secret titled \\"PinataJWT\\"")
+            return
+
+        jwt_token = st.secrets["PinataJWT"].strip()
+        headers = {
+            "Authorization": f"Bearer {jwt_token}",
+            "Content-Type": "application/json"
+        }
+
+        # Convert Python dictionary to JSON string
+        response = requests.post(url, headers=headers, json=data)
+
+        if response.status_code == 200:
+            # Print the IPFS hash from the successful response
+            ipfs_hash = response.json().get("IpfsHash")
+            return ipfs_hash
+        else:
+            st.write(f"Failed to upload JSON. Status code: {response.status_code}")
+            st.write(response.text)
+            return None
+    except Exception as e:
+        st.write(f"Error uploading to Pinata: {e}")
+
+# function that uploads to blockchain
+def upload_to_blockchain(hash):
+    print("starting blockchain upload")
+    w3 = web3.Web3(web3.HTTPProvider(st.secrets["infura"]))
+
+    # create an instance of our contract
+    contract = w3.eth.contract(address=st.secrets["ContractAddress"], abi = abi)
 
+    # Call your function: 11155111 is Sepolia's id
+    call_function = contract.functions.storeHash(hash).build_transaction({"chainId": 11155111, 
+                                                                            "from": st.secrets["EthWallet"],
+                                                                            "nonce": w3.eth.get_transaction_count(st.secrets["EthWallet"])})
+
+    # Sign transaction
+    signed_tx = w3.eth.account.sign_transaction(call_function, private_key=st.secrets["pk"])
+
+    # Send transaction
+    send_tx = w3.eth.send_raw_transaction(signed_tx.raw_transaction)
+
+    # Wait for transaction receipt
+    tx_receipt = w3.eth.wait_for_transaction_receipt(send_tx)
+
+    print("ETH Hash:")
+    print(tx_receipt.logs[0].transactionHash.hex())
+
+    return tx_receipt.logs[0].transactionHash.hex()
+
+def get_ipfs_hashes():
+    w3 = web3.Web3(web3.HTTPProvider(st.secrets["infura"]))
+
+    # Create an instance of the contract
+    contract = w3.eth.contract(address=st.secrets["ContractAddress"], abi=abi)
+
+    # Call the getHashes function
+    try:
+        ipfs_hashes = contract.functions.getHashes().call()
+        return ipfs_hashes
+    except Exception as e:
+        st.write(f"Error retrieving hashes: {e}")
+        return []
+    
+def retreive_ipfs_hash_data(hashes):
+    results = []
+    for ipfs_hash in hashes:
+        url = f"https://gateway.pinata.cloud/ipfs/{ipfs_hash}"
+        try:
+            response = requests.get(url)
+            if response.status_code == 200:
+                data = response.json()
+                results.append({"hash": ipfs_hash, "data": data})
+            else:
+                results.append({"hash": ipfs_hash, "error": f"Failed to retrieve data (status {response.status_code})"})
+        except Exception as e:
+            results.append({"hash": ipfs_hash, "error": str(e)})
+    return results
+
+
+# function that handles survey submission
+# sets up ipfs and blockchain
+def submission(survey_data):
+    ipfs_hash = upload_json_to_ipfs(survey_data)
+    if ipfs_hash:
+        print("IPFS Upload Successful")
+        print(ipfs_hash)
+        upload_to_blockchain(ipfs_hash)\n`
+    
     pythonCode += `total_number_pages = ${totalPages+1}\n`;
     pythonCode += 'placeholder_buttons = None\n\n';
     pythonCode += formatRadioOptions(questions);
@@ -921,7 +1019,7 @@ function formatSliderQuestionsPython(questions, question, index) {
     const questionText = question.querySelector('input[type="text"]').value;
     const minValue = question.querySelector('input[placeholder="Min Value"]').value || 0;
     const maxValue = question.querySelector('input[placeholder="Max Value"]').value || 10;
-    const defaultValue = (parseInt(minValue) + parseInt(maxValue)) / 2;
+    const defaultValue = Math.ceil((parseInt(minValue) + parseInt(maxValue)) / 2);
     pythonCode += `    if st.session_state["Q${index}"] == None:\n`
     pythonCode += `        st.session_state["Q${index}"] = ${defaultValue}\n`
     pythonCode += `    st.slider(label="${questionText}",min_value=${minValue},max_value=${maxValue}, 

instructions.html

@@ -68,29 +68,27 @@
       </div>
     </div>
 
-    <!-- GitHub Token Setup -->
+    <!-- Uploading code instructions -->
     <div class="card shadow-sm mb-4">
       <div class="card-header bg-primary text-white">
         <h3 class="mb-0">
           <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
-            data-bs-toggle="collapse" data-bs-target="#githubSetup" aria-expanded="false">
-            GitHub Token Setup
+            data-bs-toggle="collapse" data-bs-target="#uploadIntruc" aria-expanded="false">
+            Uploading survey file directly to Github or Huggingface
             <i class="bi bi-chevron-down rotate-icon"></i>
           </button>
         </h3>
       </div>
-      <div id="githubSetup" class="collapse">
+      <div id="uploadIntruc" class="collapse">
         <div class="card-body">
-          <p class="lead">Instructions on how to generate an Access Token for GitHub.</p>
-          <p class="text-muted">This Access Token is used to directly upload the survey to your GitHub repository.</p>
+          <p class="lead">Instructions on upload your survey file directly to Github or Huggingface from our web app.</p>
           <ol class="list-group list-group-numbered">
-            <li class="list-group-item">Go to <a href="https://github.com/" target="_blank">github.com</a> and sign in or create an account.</li>
-            <li class="list-group-item">Click your profile picture > <b>Settings</b>.</li>
-            <li class="list-group-item">Scroll down > <b>Developer settings</b>.</li>
-            <li class="list-group-item">Expand <b>Personal access tokens</b> > <b>Tokens (classic)</b>.</li>
-            <li class="list-group-item">Click <b>Generate new token (classic)</b>.</li>
-            <li class="list-group-item">Enter a name, select <b>repo</b>, and click <b>Generate token</b>.</li>
-            <li class="list-group-item"><b>Important:</b> Save the token—you won’t be able to view it again.</li>
+            <li class="list-group-item">Generate a <b>Access Token</b> on either your <b>Github</b> or <b>Huggingface</b> account. (Intructions can be found below on how to do that)</li>
+            <li class="list-group-item">Create a <b>repository</b> on Github or a <b>space</b> on Huggingface to upload the survey file to.</li>
+            <li class="list-group-item">Once you have completed both of these tasks, go to the <b>Survey Builder</b> page on our app.</li>
+            <li class="list-group-item">Click <b>Export Survey</b>, then <b>upload to Huggingface</b> or <b>Github</b>.</li>
+            <li class="list-group-item">Enter your <b>repository</b> or <b>space</b> name in the format username/repository-name and <b>Access Token</b> you generated at the beginning.</li>
+            <li class="list-group-item">Click <b>Submit</b>! This should give you a message on whether it successfully or unsuccessfully uploaded your survey file.</li>
           </ol>
         </div>
       </div>
@@ -122,50 +120,53 @@
       </div>
     </div>
 
-    <!-- Hosting Survey using Streamlit -->
+    <!-- GitHub Token Setup -->
     <div class="card shadow-sm mb-4">
       <div class="card-header bg-primary text-white">
         <h3 class="mb-0">
           <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
-            data-bs-toggle="collapse" data-bs-target="#streamlitHosting" aria-expanded="false">
-            Hosting Survey using Streamlit
+            data-bs-toggle="collapse" data-bs-target="#githubSetup" aria-expanded="false">
+            GitHub Token Setup
             <i class="bi bi-chevron-down rotate-icon"></i>
           </button>
         </h3>
       </div>
-      <div id="streamlitHosting" class="collapse">
+      <div id="githubSetup" class="collapse">
         <div class="card-body">
-          <p class="lead">Instructions on how to host your survey using Streamlit.</p>
+          <p class="lead">Instructions on how to generate an Access Token for GitHub.</p>
+          <p class="text-muted">This Access Token is used to directly upload the survey to your GitHub repository.</p>
           <ol class="list-group list-group-numbered">
-            <li class="list-group-item">Upload to GitHub, then go to <a href="https://share.streamlit.io/" target="_blank">Streamlit Sharing</a>.</li>
-            <li class="list-group-item">Sign in with GitHub and click <b>Create app</b>.</li>
-            <li class="list-group-item">Set <b>survey_script.py</b> as the main file path.</li>
-            <li class="list-group-item">Click <b>Deploy</b> to launch the app!</li>
+            <li class="list-group-item">Go to <a href="https://github.com/" target="_blank">github.com</a> and sign in or create an account.</li>
+            <li class="list-group-item">Click your profile picture > <b>Settings</b>.</li>
+            <li class="list-group-item">Scroll down > <b>Developer settings</b>.</li>
+            <li class="list-group-item">Expand <b>Personal access tokens</b> > <b>Tokens (classic)</b>.</li>
+            <li class="list-group-item">Click <b>Generate new token (classic)</b>.</li>
+            <li class="list-group-item">Enter a name, select <b>repo</b>, and click <b>Generate token</b>.</li>
+            <li class="list-group-item"><b>Important:</b> Save the token—you won’t be able to view it again.</li>
           </ol>
         </div>
       </div>
     </div>
 
-    <!-- Hugging Face API Setup -->
+    <!-- Hosting Survey using Streamlit -->
     <div class="card shadow-sm mb-4">
       <div class="card-header bg-primary text-white">
         <h3 class="mb-0">
           <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
-            data-bs-toggle="collapse" data-bs-target="#hfApiSetup" aria-expanded="false">
-            Hugging Face API Setup
+            data-bs-toggle="collapse" data-bs-target="#streamlitHosting" aria-expanded="false">
+            Hosting Survey using a Github repository through Streamlit
             <i class="bi bi-chevron-down rotate-icon"></i>
           </button>
         </h3>
       </div>
-      <div id="hfApiSetup" class="collapse">
+      <div id="streamlitHosting" class="collapse">
         <div class="card-body">
-          <p class="lead">Instructions for integrating Hugging Face API.</p>
+          <p class="lead">Instructions on how to host your survey using a Github repo through Streamlit.</p>
           <ol class="list-group list-group-numbered">
-            <li class="list-group-item">
-              Step 1: <span id="download-requirements-btn" style="color: blue; text-decoration: underline; cursor: pointer;">Download Requirements</span>
-            </li>
-            <li class="list-group-item">Step 2: [To be added]</li>
-            <li class="list-group-item">Step 3: [To be added]</li>
+            <li class="list-group-item">Once you have uploaded the survey file to GitHub, then go to <a href="https://share.streamlit.io/" target="_blank">Streamlit Sharing</a>.</li>
+            <li class="list-group-item">Sign in with GitHub and click <b>Create app</b>.</li>
+            <li class="list-group-item">Set <b>survey_script.py</b> as the main file path.</li>
+            <li class="list-group-item">Click <b>Deploy</b> to launch the app! (This should give you a link to where people can now take your survey)</li>
           </ol>
         </div>
       </div>
@@ -241,17 +242,39 @@
       </div>
     </div>
 
+    <!-- Deploying Smart Contract Setup -->
+    <div class="card shadow-sm mb-4">
+      <div class="card-header bg-primary text-white">
+        <h3 class="mb-0">
+          <button class="btn btn-link text-white text-decoration-none w-100 d-flex justify-content-between align-items-center collapsed"
+            data-bs-toggle="collapse" data-bs-target="#smartContract" aria-expanded="false">
+            Deploying Smart Contract
+            <i class="bi bi-chevron-down rotate-icon"></i>
+          </button>
+        </h3>
+      </div>
+      <div id="smartContract" class="collapse">
+        <div class="card-body">
+          <p class="lead">These are instructions on how to deploy a smart contract.</p>
+          <ol class="list-group list-group-numbered">
+            <li class="list-group-item">Download the <button id="download-smartcontract-btn" class="link-like">Smart Contract deployment</button> zip file</li>
+            <li class="list-group-item">Unzip the file and open in a text editor</li>
+          </ol>
+        </div>
+      </div>
+    </div>
+
+
   </div>
 
   <script>
-    document.getElementById('download-requirements-btn').addEventListener('click', () => {
-      const blob2 = new Blob(["web3==7.8.0\nrequests==2.31.0\nstreamlit==1.28.2"], { type: 'text/plain' });
-      const a2 = document.createElement("a");
-      a2.href = URL.createObjectURL(blob2);
-      a2.download = "requirements.txt";
-      document.body.appendChild(a2);
-      a2.click();
-      document.body.removeChild(a2);
+    document.getElementById('download-smartcontract-btn').addEventListener('click', () => {
+      const a = document.createElement("a");
+      a.href = "Blockchain.zip";  // Path to your local ZIP file
+      a.download = "Blockchain.zip";
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
     });
   </script>