Data Structure Writeup

[liangkyle08]

APIs and JSON

• In VSCode, show Python API code definition for request and response using GET, POST, UPDATE methods. Discuss algorithmic condition used to direct request to appropriate Python method based on request method.

  
  class MessageAPI:
  class _CRUD(Resource):
      @token_required
      def post(self, current_user, Message): # Create Method
          body = request.get_json()
  
          # Validate message content
          message_content = body.get('message')
          if not message_content:
              return {'message': 'Message content is missing'}, 400
  
          # Create Message object
          message = Message(uid=current_user.uid, message=message_content)
  
          # Add message to database
          try:
              created_message = message.create()
              return jsonify(created_message.read()), 201
          except Exception as e:
              return {'message': f'Failed to create message: {str(e)}'}, 500
  
      @token_required()
      def get(self, _): # Read Method
          messages = Message.query.all()
          json_ready = [message.read() for message in messages]
          return jsonify(json_ready)
  
      def put(self, old_message, new_message, likes):
          Message.update(old_message, new_message, likes)
  class _Send(Resource):
      def post(self):
          token = request.cookies.get("jwt")
          uid = jwt.decode(token, current_app.config["SECRET_KEY"], algorithms=["HS256"])['_uid'] # current user
          body = request.get_json()
          # Fetch data from the form
          message = body.get('message')
          likes = body.get('likes')
          if uid is not None:
              new_message = Message(uid=uid, message=message, likes=likes)
          message = new_message.create()
          if message:
              return message.read()
          return {'message': f'Processed {uid}, either a format error or User ID {uid} is duplicate'}, 400
  
  class _Likes(Resource):
      def put(self):
          body = request.get_json()
          message = body.get('message')
          message = Message.query.filter_by(_message=message).first()
          message.likes += 1
  
  class _Delete(Resource):
      @token_required()
      def delete(self, x): # Delete Method
          body = request.get_json()
          message_id = body.get('message')
          uid = body.get('uid')
          if not message_id:
              return {'message': 'Message ID is missing'}, 400
  
          for message in Message.query.all():
              pass
          if not message:
              return {'message': 'Message not found'}, 404
  
          if message.uid != uid:
              return {'message': 'You are not authorized to delete this message'}, 403
  
          try:
              message.delete()
              return {'message': 'Message deleted successfully'}, 200
          except Exception as e:
              return {'message': f'Failed to delete message: {str(e)}'}, 500

api.add_resource(MessageAPI._CRUD, '/') api.add_resource(MessageAPI._Send, '/send') api.add_resource(MessageAPI._Delete, '/delete') api.add_resource(MessageAPI._Likes, '/like')

> The algorithmic condition used to direct requests to the appropriate Python method based on the request method typically involves a conditional statement that checks the HTTP method of the incoming request. This condition is often implemented using an `if` statement or a similar construct that evaluates the method of the request, such as `request.method`, and routes the request to the corresponding Python method accordingly. For example, in Flask, this condition might look like `if request.method == 'GET':` to handle GET requests or `elif request.method == 'POST':` to handle POST requests. Each conditional branch then invokes the appropriate Python method responsible for processing the request corresponding to that HTTP method. This approach ensures that the application can handle different types of requests effectively and execute the appropriate logic based on the action being performed by the client.
- In VSCode, show algorithmic conditions used to validate data on a POST condition.
```python
@token_required
def post(self, current_user, Message): # Create Method
    body = request.get_json()

    # Validate message content
    message_content = body.get('message')
    if not message_content:
        return {'message': 'Message content is missing'}, 400

    # Create Message object
    message = Message(uid=current_user.uid, message=message_content)

    # Add message to database
    try:
        created_message = message.create()
        return jsonify(created_message.read()), 201
    except Exception as e:
        return {'message': f'Failed to create message: {str(e)}'}, 500

• In Postman, show URL request and Body requirements for GET, POST, and UPDATE methods. In Postman, show the JSON response data for 200 success conditions on GET, POST, and UPDATE methods.

• In Postman, show the JSON response for error for 400 when missing body on a POST request.

• In Postman, show the JSON response for error for 404 when providing an unknown user ID to a UPDATE request.

• Blog JavaScript API fetch code and formatting code to display JSON.

  <div class="container">
      <div class="input-container">
      <form action="javascript:createPost()" id="postButton">
          <h2>Post Your Message</h2>
          <textarea id="message" placeholder="Type your post..."></textarea>
          <button id="postButton">Post</button>
      </form>
      </div>
      <div class="posts-container" id="postsWrapper">
          <h2>Posts</h2>
          <input type="text" id="searchInput" oninput="searchPosts()" placeholder="Search posts...">
          <div id="posts"></div>
      </div>
  </div>
  <div id="latestPosts" class="latest-posts"></div>
  <script>
  function createPost() {
      var myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/json");
      const message = document.getElementById("message").value;
      const body = {
          message: message,
          likes: 0
      };
      const authOptions = {
          method: 'POST',
          cache: 'no-cache',
          headers: myHeaders,
          body: JSON.stringify(body),
          credentials: 'include'
      };
      fetch('http://127.0.0.1:8086/api/messages/send', authOptions)
          .then(response => {
              if (!response.ok) {
                  console.error('Failed to create post:', response.status);
                  return null;
              }
              const contentType = response.headers.get('Content-Type');
              if (contentType && contentType.includes('application/json')) {
                  return response.json();
              } else {
                  return response.text();
              }
          })
          .then(data => {
              if (data !== null) {
                  console.log('Response:', data);
                  // Update the posts container with the new post
                  updatePostsContainer(data["uid"], message, 0);
              }
          })
          .catch(error => {
              console.error('Error:', error);
          });
  }
  function fetchPosts() {
      var myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/json");
      const authOptions = {
          method: 'GET',
          cache: 'no-cache',
          headers: myHeaders,
          credentials: 'include'
      };
      fetch('http://127.0.0.1:8086/api/messages/', authOptions)
          .then(response => {
              if (!response.ok) {
                  console.error('Failed to fetch posts:', response.status);
                  return null;
              }
              return response.json();
          })
          .then(posts => {
              if (posts === null || posts === undefined) {
                  console.warn('Received null or undefined posts.');
                  alert('Please Log in first!')
                  return;
              }
              console.log('Fetched Posts:', posts);
              displayPosts(posts);
          })
          .catch(error => {
              console.error('Error:', error);
          });
  }
  function displayPosts(posts) {
      const postsContainer = document.getElementById('posts');
      postsContainer.innerHTML = ''; // Clear existing posts
      posts.forEach(post => {
          updatePostsContainer(post.uid, post.message, post.likes);
      });
  }
  function updatePostsContainer(uid, message, likes) {
      const postsContainer = document.getElementById('posts');
      const postDiv = document.createElement('div');
      postDiv.className = 'post-container';
      const postContent = document.createElement('p');
      postContent.className = 'post-content';
      postContent.textContent = `UID: ${uid}, Message: ${message}`;
      const replyButton = document.createElement('button');
      replyButton.textContent = 'Reply';
      replyButton.addEventListener('click', () => showReplyForm(uid));
      const deleteButton = document.createElement('button'); // Delete button
      deleteButton.textContent = 'Delete'; // Set text content to 'Delete'
      deleteButton.addEventListener('click', () => deletePost(uid, message)); // Attach event listener to delete button
      const likeButton = document.createElement('button'); // Like button
      likeButton.textContent = 'Like';
      likeButton.addEventListener('click', () => {
          likePost(uid, message);
          // Hide the like button after clicking
          likeButton.style.display = 'none';
      });
      const likeCountContainer = document.createElement('div');
      likeCountContainer.className = 'like-count-container';
      const likesCountSpan = document.createElement('span');
      likesCountSpan.className = 'likes-count';
      likesCountSpan.textContent = `${likes} 👍`;
      likeCountContainer.appendChild(likesCountSpan);
      postDiv.appendChild(postContent);
      postDiv.appendChild(replyButton);
      postDiv.appendChild(deleteButton); // Append the delete button
      postDiv.appendChild(likeButton);
      postDiv.appendChild(likeCountContainer);
      postsContainer.appendChild(postDiv);
  }
  // Code Continues Here
  </script>

• In Chrome inspect, show response of JSON objects from fetch of GET, POST, and UPDATE methods. In the Chrome browser, show a demo (GET) of obtaining an Array of JSON objects that are formatted into the browsers screen.

• In JavaScript code, show code that performs iteration and formatting of data into HTML.

function displayPosts(posts) {
        const postsContainer = document.getElementById('posts');
        postsContainer.innerHTML = ''; // Clear existing posts
        posts.forEach(post => {
            updatePostsContainer(post.uid, post.message, post.likes);
        });
    }
    function updatePostsContainer(uid, message, likes) {
        const postsContainer = document.getElementById('posts');
        const postDiv = document.createElement('div');
        postDiv.className = 'post-container';
        const postContent = document.createElement('p');
        postContent.className = 'post-content';
        postContent.textContent = `UID: ${uid}, Message: ${message}`;
        const replyButton = document.createElement('button');
        replyButton.textContent = 'Reply';
        replyButton.addEventListener('click', () => showReplyForm(uid));
        const deleteButton = document.createElement('button'); // Delete button
        deleteButton.textContent = 'Delete'; // Set text content to 'Delete'
        deleteButton.addEventListener('click', () => deletePost(uid, message)); // Attach event listener to delete button
        const likeButton = document.createElement('button'); // Like button
        likeButton.textContent = 'Like';
        likeButton.addEventListener('click', () => {
            likePost(uid, message);
            // Hide the like button after clicking
            likeButton.style.display = 'none';
        });
        const likeCountContainer = document.createElement('div');
        likeCountContainer.className = 'like-count-container';
        const likesCountSpan = document.createElement('span');
        likesCountSpan.className = 'likes-count';
        likesCountSpan.textContent = `${likes} 👍`;
        likeCountContainer.appendChild(likesCountSpan);
        postDiv.appendChild(postContent);
        postDiv.appendChild(replyButton);
        postDiv.appendChild(deleteButton); // Append the delete button
        postDiv.appendChild(likeButton);
        postDiv.appendChild(likeCountContainer);
        postsContainer.appendChild(postDiv);
    }

• In the Chrome browser, show a demo (POST or UPDATE) gathering and sending input and receiving a response that show update. Repeat this demo showing both success and failure.

• In JavaScript code, describe fetch and method that obtained the Array of JSON objects. In JavaScript code, show and describe code that handles success. Describe how code shows success to the user in the Chrome Browser screen. In JavaScript code, show and describe code that handles failure. Describe how the code shows failure to the user in the Chrome Browser screen.

function fetchPosts() {
        var myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");
        const authOptions = {
            method: 'GET',
            cache: 'no-cache',
            headers: myHeaders,
            credentials: 'include'
        };
        fetch('http://127.0.0.1:8086/api/messages/', authOptions)
            .then(response => {
                if (!response.ok) {
                    console.error('Failed to fetch posts:', response.status);
                    return null;
                }
                return response.json();
            })
            .then(posts => {
                if (posts === null || posts === undefined) {
                    console.warn('Received null or undefined posts.');
                    alert('Please Log in first!')
                    return;
                }
                console.log('Fetched Posts:', posts);
                displayPosts(posts);
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }

First program checks for JSON response from backend (if successful return the data, otherwise post "Failed to fetch posts" and respective error). Also, if user is not logged in, will also prompt the user to login.

[liangkyle08]

Optional/Extra, Algorithm Analysis

🔗 Link to ML Project Blog

• Show algorithms and preparation of data for analysis. This includes cleaning, encoding, and one-hot encoding.

  function calculateSurvival() {
  // Extract data from AI model
  extractData()
      .then((AIData) => {
          // Prepare passenger data
          const passengerData = {
              name: document.getElementById("name").value,
              pclass: parseInt(getCheckedCheckboxValue("pclass")),
              sex: AIData[0],
              age: AIData[1],
              sibsp: parseInt(document.getElementById("sibsp").value),
              parch: parseInt(document.getElementById("parch").value),
              fare: parseFloat(document.getElementById("fare").value),
              embarked: getCheckedCheckboxValue("embarked"),
              alone: document.getElementById("alone").value === "true" ? true : false,
          };
  
          // Prepare body for POST request
          const body = {
              passenger: passengerData,
          };
  
          // Options for the POST request
          const post_options = {
              method: "POST",
              cache: "no-cache",
              body: JSON.stringify(body),
              headers: {
                  "Content-Type": "application/json",
                  "Access-Control-Allow-Origin": "include",
              },
          };
  
          // Send POST request to server
          fetch(url, post_options)
              .then((response) => {
                  if (!response.ok) {
                      const errorMsg = response.status;
                      console.log(errorMsg);
                      return;
                  }
                  return response.json();
              })
              .then((data) => {
                  // Update UI with survival data
                  const h1 = document.getElementById("survival");
                  h1.textContent = data[0];
              })
              .catch((err) => {
                  // Handle errors
                  console.error(err);
              });
      })
      .catch((err) => {
          // Handle errors from AI data extraction
          console.error(err);
      });
  }

# data extraction
data = information[0]  # get the first element
age = data["age"]  # age extraction

bothGenders = data["gender"]  # get both gender confidence rates
woman = bothGenders["Woman"]  # woman confidence
man = bothGenders["Man"]  # man confidence

# based on the probabilities, find which is larger and return that
gender = None
if woman > man:
    gender = "Female"
elif woman < man:
    gender = "Male"

# the order is very important (must be gender THEN age)
returnData = [gender, age]  # create a list and send it

return returnData  # return

• Show algorithms and preparation for predictions.

  def load_model(url="https://github.com/serengil/deepface_models/releases/download/v1.0/age_model_weights.h5") -> Model:
  """
  Construct age model, download its weights and load
  Returns:
      model (Model)
  """
  
  # Construct base model
  model = VGGFace.base_model()
  
  # Add layers for age prediction
  classes = 101
  base_model_output = Sequential()
  base_model_output = Convolution2D(classes, (1, 1), name="predictions")(model.layers[-4].output)
  base_model_output = Flatten()(base_model_output)
  base_model_output = Activation("softmax")(base_model_output)
  
  # Construct age model
  age_model = Model(inputs=model.input, outputs=base_model_output)
  
  # Load weights
  home = folder_utils.get_deepface_home()
  
  if os.path.isfile(home + "/.deepface/weights/age_model_weights.h5") != True:
      logger.info("age_model_weights.h5 will be downloaded...")
  
      output = home + "/.deepface/weights/age_model_weights.h5"
      gdown.download(url, output, quiet=False)
  
  age_model.load_weights(home + "/.deepface/weights/age_model_weights.h5")
  
  return age_model

• Discuss concepts and understanding of Linear Regression algorithms.

  Linear regression is a method used to model the relationship between a dependent variable and one or more independent variables by fitting a linear equation to observed data. In data preparation, cleaning involves handling missing values and outliers, while encoding categorical variables ensures compatibility with the model. One-hot encoding, for example, is used when dealing with categorical data. In the provided code snippets, data extraction and encoding are essential steps for preparing data for analysis, such as extracting gender and age information from a dataset. Linear regression models aim to find the best-fitting line that describes the relationship between variables, facilitating predictions based on this linear relationship.

• Discuss concepts and understanding of Decision Tree analysis algorithms.

  Decision trees are hierarchical structures used for both classification and regression tasks, where each internal node represents a decision based on a feature, and each leaf node represents a prediction or outcome. Data preparation involves similar steps to linear regression, focusing on cleaning and preprocessing. However, decision tree algorithms are capable of handling categorical variables inherently without needing explicit encoding. In the provided example, the decision-making process based on confidence rates for gender can be likened to a decision tree node making splits based on certain conditions. Decision tree analysis simplifies complex decision-making processes into a series of if-else conditions, providing clear paths for predictions.

[liangkyle08]

Collections

• From VSCode using SQLite3 Editor, show your unique collection/table in database, display rows and columns in the table of the SQLite database.

• From VSCode model, show your unique code that was created to initialize table and create test data.

  def initMessages():
  with app.app_context():
      """Create database and tables"""
      db.create_all()
  
      """Tester data for table"""
      m1 = Message(uid='toby', message='Hello from Thomas Edison', likes=3)
      m2 = Message(uid='niko', message='Greetings from Nicholas Tesla', likes=0)
      m3 = Message(uid='lex', message='Welcome from Alexander Graham Bell', likes=27)
      m4 = Message(uid='hop', message='Good day from Grace Hopper', likes=-74)
      messages = [m1, m2, m3, m4]
  
      """Add message data to the table"""
      for message in messages:
          try:
              message.create()
          except IntegrityError:
              '''fails with bad or duplicate data'''
              db.session.remove()
              print(f"Records exist, duplicate message, or error: {message.uid}")

[liangkyle08]

Lists and Dictionaries

• In VSCode using Debugger, show a list as extracted from database as Python objects.

[AnvayYadav]

Reviewer: Anvay Yadav Completedness: 0.9/1 Neatness: 1/1 +0.05 (extra credit)

I think this is a good issue but you could add more screenshots detailing the code and write more text explaining the code. Everything is super neat, so full points for that. You have everything, but doing a bit more will get you the last few points. Extra credit earns you 0.05 extra.

1.95/2 = 97.5%