Saturday, May 28, 2022
HomeData ScienceRec-a-Sketch: a Flask App for Interactive Sketchfab Suggestions

Rec-a-Sketch: a Flask App for Interactive Sketchfab Suggestions


After the lengthy sequence of earlier posts describing numerous advice algorithms utilizing Sketchfab information, I made a decision to construct a web site known as Rec-a-Sketch which visualizes the completely different algorithms’ suggestions. On this publish, I’ll describe the method of getting this web site up and working on AWS with nginx and gunicorn.

Purpose

The purpose of the web site was two-fold.

  1. I wished to view the completely different algorithm’s suggestions side-by-side for comparability.
  2. I wished to get “misplaced” within the suggestions like one will get misplaced clicking from hyperlink to hyperlink on Wikipedia.

I organized the web page as follows in order that (1) all suggestions had been seen and (2) one can click on on any of the advisable fashions to be taken to that mannequin’s suggestions.

Group of the App

I made a decision to make use of Flask to construct the net app as a result of I have already got some expertise with it, and I’m not attempting to reinvent the wheel! The performance itself is pretty easy. Apart from an about web page, there is just one web page and one Flask route in the entire web site.

The performance is comparatively easy. When one initially goes to the web page, there’s a default listing of fashions to pick out from, or one can enter a hyperlink to a customized mannequin. As soon as a mannequin is chosen, this sends a GET request to the principle route. When the route receives this request, it should do two issues:

  1. Seize information in regards to the enter mannequin (identify, url, and thumbnail).
  2. Discover different advisable fashions and get their related information.

I populated a sqllite database with information in regards to the Sketchfab fashions. I don’t retailer the thumbnails straight; fairly, I embrace a hyperlink to the thumbnail on Sketchfab’s servers.

For grabbing suggestions, I created a desk with precomputed suggestions for every mannequin. The suggestions are saved within the stupidest potential manner as a string of comma-separated mannequin ID’s. I pull down the string, cut up on the commas, and place every part in a listing. The code appears one thing like what follows.

# mid is an inputted mannequin ID
# kind is the advice algorithm kind (e.g. learning-to-rank)
c = conn.cursor()
sql = """
    SELECT
      kind,
      advisable
    FROM suggestions
    WHERE
      mid = '{}'
""".format(mid)
c.execute(sql)
outcomes = c.fetchall()
suggestions = []
for r in outcomes:
    suggestions.append((r[0], [str(x) for x in r[1].cut up(',')]))
suggestions = dict(out)

I ought to observe that the above code is definitely topic to SQL Injection. Please don’t write code like this on a manufacturing server!

The principle route performance was really the simplest a part of the entire challenge. The toughest elements had been getting issues working remotely.

Deploying to AWS

This publish from DigitalOcean was tremendous useful in getting issues up and working. The truth is, I virtually adopted that publish verbatim.

EC2

For my functions, I selected to make use of Amazon Internet Providers (AWS) as a substitute of DigitalOcean for internet hosting the Rec-a-Sketch. This was indicate as a result of I had earlier expertise with AWS. Step one is to setup an EC2 occasion which is digital server. Rec-a-Sketch is light-weight, so I selected a t2.nano occasion as a result of it’s the most affordable.

One should create an Elastic IP deal with for the occasion (which prices some cash) in addition to open ports 80 and 22. The ports may be opened by going to Community & Safety -> Safety Teams and making a safety group with the next ports:

main page

When the EC2 occasion is created, you’ll be able to obtain a pem file which lets you ssh into the EC2 field. Save the pem file to your pc, and set the permissions accordingly:

chmod 400 pemfile.pem

I normally place the file in ~/.ssh/ after which add the file to my ~/.ssh/config file for simple ssh-ing in a while. The config file enables you to setup fast aliases for ssh-ing (see right here for extra particulars).

The Stack

When you’re capable of ssh into the EC2 occasion, it’s time to setup the stack. The stack consists of the next:

  1. nginx | an online server which may deal with incoming requests and redirect them to your Flask app.
  2. upstart | this makes certain that your Flask app stays up and working. If the app ought to die, upstart will begin it again up once more.
  3. gunicorn | a python WSGI HTTP server. I freely admit that I don’t fairly get the aim of gunicorn. One clear profit is you can run a number of “employees” or copies of your Flask app which lets you course of a number of requests without delay.

The DigitalOcean posts walks by the setup of this stack fairly properly. Some modifications that I made are that I take advantage of miniconda for managing the python libraries. In my upstart script, I’ve to verify so as to add miniconda to the PATH surroundings variable. The upstart script is on github right here, and the nginx configuration is right here.

I did run into some points establishing each the upstart service and nginx (when do issues ever work the primary time round?). Each providers have log information which may be useful for debugging. nginx had entry and error logs in /var/log/nginx/, and every upstart service has its personal log in /var/log/upstart/.

Picture Internet hosting

I discussed earlier than that I don’t really host the Sketchfab mannequin photos on my server. I must pay for outgoing bandwidth, and this is able to add up fairly quick (if individuals really go to my web site!). A less complicated solution to host photos (although perhaps morally doubtful?) is to level to the url the place Sketchfab hosts the picture.

The Sketchfab API simply enables you to discover the placement of a picture thumbnail. At first I might simply ping the Sketchfab API for every request that got here into my Flask app. This proved tremendous sluggish as a result of I must look ahead to the Sketchfab API response every time. I attempted to resolve this by working a giant script to retailer all API responses in my very own database.

This labored for a bit, however then the picture hyperlinks began to interrupt. I used to be confused for a bit, however perhaps you’ll be able to work out what occurred – right here’s an instance picture hyperlink:

https://dg5bepmjyhz9h.cloudfront.web/urls/a1194aa7be824b7da6accb1d0c788132
/dist/thumbnails/93e331260a8142c6ab85d61f6a025476/200x200.jpeg

What’s happening right here? It seems that Sketchfab neatly hosts their photos utilizing a Content material Supply Community, or CDN. CDNs are used to rapidly serve information to customers by internet hosting the information a lot nearer to the consumer. There’s no assure that the filename ought to keep the identical on the CDN node, and evidently they don’t.

I didn’t need to return to pinging the Sketchfab API on each request, so I settled on a compromise. I setup a cron job to run each two days to seize the present picture urls. The idea right here is that these urls won’t change too rapidly, and I’m wonderful with small breakages within the meantime. The cron job script is positioned right here.

Closing Ideas

I had a number of enjoyable enjoying with the Sketchfab information and constructing Rec-a-Sketch. There much more algorithms that I want to check out on the information, however I could wish to enterprise into a unique challenge in the intervening time. I might encourage you to attempt enjoying with the information and see what pops out. Within the meantime, attempt getting “misplaced” in Rec-a-Sketch!

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments