Code Monkey home page Code Monkey logo

omnicalc-actions's Introduction

Omnicalc Actions

Introduction

The goal of this project is to get more practice with writing Ruby programs. You will execute the code simply by visiting a particular URL in your browser. Your visit will trigger the execution of the Ruby code, and the output will appear in your browser window.

Target

Ultimately, you will build this application:

http://omnicalc-actions.herokuapp.com/

It is a collection of calculators that do various things; count the number of words in a block of text, the monthly payment for a loan, etc. Over time, we may add more and more calculators if we feel like it (if you have a suggestion for a calculator you think we should add, please let us know).

Part 1

Setup

  1. Setup the project on Cloud9 using this process.

  2. Now paste the URL of your running application into a Chrome tab (or click the underlined URL that appears in the terminal when you run the project). If all went well, you should see the New Word Count form. If not, let us know right away.

  3. Type in some text and submit the form.

  4. On the results page, you will currently see just a bunch of placeholders. Your job will be to replace the placeholders with correctly computed values.

  5. In Atom, find the /app/controllers/word_count_controller.rb file.

  6. Locate the part of the file that looks like this:

    def word_count
      @text = params[:user_text]
      @special_word = params[:user_word]
    
      # ================================================================================
      # Your code goes below.
      # The text the user input is in the string @text.
      # The special word the user input is in the string @special_word.
      # ================================================================================
    
    
      @character_count_with_spaces = "Replace this string with your answer."
    
      @character_count_without_spaces = "Replace this string with your answer."
    
      @word_count = "Replace this string with your answer."
    
      @occurrences = "Replace this string with your answer."
    end
    
  7. The code between the def word_count and end is the program that gets executed. I have already written some code that retrieves the inputs from the form and places them into variables for you to use, @text and @special_word.

  8. Your job is to write code below the comments and, ultimately, store the correct values in the variables I created at the bottom of the method. For example, to solve the first part, call .length on the user's input, @text, and assign the result to @character_count_with_spaces.

    @character_count_with_spaces = @text.length
    
  9. You have to figure out how to calculate the correct value for the rest: @character_count_without_spaces, @word_count, and @occurrences. Don't change the names of these variables; if you do, your results won't appear in the browser in the end.

  10. Refresh the results page in your browser to re-run your code and see new output.

  11. You can write as much or as little code as it takes to produce the correct answer; create intermediate variables if you want, or do anything else that you learned about from class. It's all just the same Ruby as before.

  12. Keep working; your goal is to make your application behave exactly like the target. Next, work on the Loan Payment calculator. You'll again be working in the same file, /app/controllers/calculations_controller.rb. This time, scroll down to the method def loan_payment and write your code in there as indicated by the comments.

  13. Some tasks are easier, some are much harder. For example, in the Descriptive Statistics calculator, finding the mode (the number that occurs most frequently in a list of numbers) is surprisingly hard. Do your best, but don't get discouraged if you can't quite solve it.

  14. The Introduction to Ruby contains enough tools to solve all of the Omnicalc challenges. (You can build up almost anything from scratch given conditionals, loops, and variables.) You should attempt to solve it using the tools you've already seen.

  15. For the mode calculation, just worry about the simplest case; when there's one number that occurs most frequently, that should be shown as the mode. I won't be testing the case that there's a tie.

  16. When you're ready for some automated feedback, run rspec in a Terminal tab. There will be a bunch of output; don't be intimidated! Try to read through it and make sense of it; ask questions on Piazza, and we'll discuss in detail next week.

  17. Ask lots of questions!

Part 2

For this section, we're going to be extending your work with Omnicalc by exploring a machine learning API marketplace called Algorithmia. It's a fantastic resource that connects us to a large number of machine learning APIs, including many that do text and image analysis.

You'll get practice using forms to capture and process user input using some interesting applications including:

  • a service that auto-tags large blocks of text
  • a service that colorizes black and white images
  • a service that auto-tags images with descriptive keywords

API Setup

First, visit Algorithmia and sign up for an account. You'll be able to find your API keys by visiting 'https://algorithmia.com/users/[your username]' or by clicking on the profile icon at the top right and clicking the 'My API Keys' link. You'll need this key to complete the homework exercises below.

We'll also need to make sure your API key stays hidden, in case your project ever gets pushed to Github or another public repository. Unsavory types like to scrape Github for sensitive information like API keys and run up huge bills for compromised users. In this specific case, you didn't have to tie your API key to a credit card, but protecting your API keys is generally good practice.

We've already got the infrastructure for this in place. Our class project apps come bundled with a gem called dotenv which lets us store sensitive information just in our local development environment and hide that info from Git so it doesn't get pushed anywhere with our code. The info is stored in a file called .env that exists in the root folder of your application. Create a new file at the root directory of your application and call it .env. In the file place, the following code:

ALGORITHMIA_KEY="replace_me_with_your_key"

This is just a key-value pair that we can access anywhere in our Rails environment using the ENV hash. For example, to access this 'sensitive' info, we can open up Rails console and type in:

ENV['ALGORITHMIA_KEY']

and we should see output of

"replace_me_with_your_key"

You can use this pattern throughout your Rails app to pull up any sensitive info. Practice by using the .env file to store your actual Algorithmia API key.

Problem 1 - Auto-tag Text

The first service we'll use auto-tags blocks of text.

Here's how it should work:

  • If I visit /text-tag, I should see a form that has a single textarea element which lets me enter text for tagging. If you'd like an example, you can use this excerpt from the Paul Graham essay, Do Things That Don't Scale:
One of the most common types of advice we give at Y Combinator is to do things that don't scale. A lot of would-be founders believe that startups either take off or don't. You build something, make it available, and if you've made a better mousetrap, people beat a path to your door as promised. Or they don't, in which case the market must not exist.
  • The textarea should have a label of Text and the button you click to submit the form should be called Generate Tags.
  • When the form is submitted, I should see an unordered list of tags corresponding to the submitted text. If you used the example text, you should see the following tags:
beat
case
door
exist
market
path
people
promise

Visit the AutoTag page, and use the instructions at the bottom of the page as a starting point to integrate the API in your controller. ** You do not need to include the require 'algorithmia' statement from the instructions**

input = "A purely peer-to-peer version of electronic cash would allow online payments to be sent directly from one party to another without going through a financial institution. Digital signatures provide part of the solution, but the main benefits are lost if a trusted third party is still required to prevent double-spending. We propose a solution to the double-spending problem using a peer-to-peer..."
client = Algorithmia.client('simY67zXT/iPapXphMKEGTFDgSI1')
algo = client.algo('nlp/AutoTag/1.0.1')
result = algo.pipe(input).result

Problem 2 - Colorize Images

The next service we'll use colorizes black and white images.

Here's how it should work:

  • If I visit /colorize, I should see a form that has a single input which lets me enter the URL of a black and white image. You can use https://cdn.vox-cdn.com/uploads/chorus_asset/file/4863353/grantpark-1.0.jpg as an example. The smaller the image, the better. Try not to go beyond 800x800px.
  • The input should have a label of Image URL and the button you click to submit the form should be called Colorize.
  • When the form is submitted, I should see a colorized version of the original black and white picture

The API needs a bit of time to do it's work, so expect it to take about 30 seconds or so for the request to complete.

Visit the Image Colorization page, and use the instructions at the bottom of the page as a starting point to integrate the API in your controller.

input = {
  image: "data://deeplearning/example_data/lincoln.jpg"
}
client = Algorithmia.client('simY67zXT/iPapXphMKEGTFDgSI1')
algo = client.algo('deeplearning/ColorfulImageColorization/1.1.13')
reslult = algo.pipe(input).result

Problem 3 - Auto-tag Images

The next service we'll use tags images.

Here's how it should work:

  • If I visit /image-tag, I should see a form that has a single input which lets me enter the URL of an image. You can use http://www.pjproductions.co.uk/blog_images/Chicago-Booth-Group-photo-Pete-Jones.jpg as an example. Try to make sure you use images with people in it, since the tags are not as descriptive for pictures with inanimate objects or animals.
  • The input should have a label of Image URL and the button you click to submit the form should be called Colorize.
  • When the form is submitted, I should see a set of tags inside an unordered list.

The API needs a bit of time to do it's work, so expect it to take about 30 seconds or so for the request to complete.

Visit the Illustration Tagger page, and use the instructions at the bottom of the page as a starting point to integrate the API in your controller.

input = {
  image: "data://deeplearning/example_data/trudeau.jpg"
}
client = Algorithmia.client('simY67zXT/iPapXphMKEGTFDgSI1')
algo = client.algo('deeplearning/IllustrationTagger/0.4.0')
result = algo.pipe(input).result

Part 3

For instructions on Part 3, please see this guide

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.