Deployment Platform: Render ✅

Hi Abhijith
I tested your app.


It works fine on my Samsung Galaxy using Chrome and the Samsung Browser.
Though all the images I put in return undefined.

Have you you tried using smaller images and a different browser on your phone.

mrfabulous1 :grinning::grinning:

Hey!
Can you please try now? There was a bug earlier cause of which it was returning undefined. Thanks for the help!

Hi ab123
This works fine now on my Samsung phone using chrome and the Samsung browser.

mrfabulous1

Thank You @mrfabulous1
Any idea why its not working on other mobiles? I too use Chrome but on my mobile it is stuck. Wonder why? :thinking:

Good afternoon ab123

Can you do the following

  1. have you got any other browser on your mobile you can try.
  2. Can you install any other browser on your phone and try it.
  3. What version of chrome are you using on your mobile.
  4. Test your browser on another render app like the bears app on render.
  5. Test your app with one of the images from your test set and make sure it small like 20k.
  6. I am using Samsung Internet version 9.2.10.5 and the latest version of chrome.
  7. some people have had problems with various browsers. Safari on my desktop gets stuck in Analyzing.
  8. If you test all the above it should get you closer to solving the problem.

Cheers mrfabulous1 :grinning::smiley:

Hey!
Thanks for the info! I changed to Firefox and it worked! Also, it did work on a different version of Chrome, but do not know the exact release. Anyways, Thanks! @mrfabulous1

Hi ab123 Congratulations glad its working.

mrfabulous1 :smiley::smiley:

Hey guys! I’m currently prepping a deployment workshop/teaching for my Fast.AI study group at my University, and I’m revisiting the Render methodology as a baseline to utilize Starlette. While looking over the source code, I’m noticing that classes is never utilized in ‘serve.py’. Is it being used elsewhere? Or never utilized at all? Thanks!

One other question, if we want to upload and analyze a CSV document, how do I set it up so it’s readable? For example, my customer sends a CSV full of URLs and I want to download them all, so my analyze function looks like so:

@app.route('/analyze', methods=['POST'])
async def analyze(request):
    data = await request.form()
    content = data['content']
    mkdir('Downloaded_Images')
    download_images(content, 'Downloaded_Images')
    path2 = Path('Downloaded_Images')
    data = ImageList.from_folder(path)
    learn = load_learner(path, export_file_name, test=data)
    y, _ = learn.get_preds(DatasetType.Test)
    y = torch.argmax(y, dim=1)
    preds = [learn.data.classes[int(x)] for x in y]
    resultsFile = open('results.csv', 'wb')
    wr = csv.writer(resultsFile)
    wr.writerows([preds])
    return FileResponse('results.csv')

I know that currently it does not work, as I get a ‘KeyError: ‘content’’ but I am unsure where to go from here. Any advice? Thanks :slight_smile:

I’d log the contents of your XMLHttprequest to the console in the browser to check what’s being sent to the server and perhaps use the debugger on the server side to inspect what ‘data’ looks like also

1 Like

@OllieG, thank you for the reply :slight_smile: I’m very new to web-development so I’m a little bit lost there. I tried looking at the console and it says there was an error in the client.js (something I didn’t think to change)

var el = x => document.getElementById(x);

function showPicker() {
  el("file-input").click();
}

function showPicked(input) {
  el("upload-label").innerHTML = input.files[0].name;
  var reader = new FileReader();
  reader.onload = function(e) {
    el("image-picked").src = e.target.result;
    el("image-picked").className = "";
  };
  reader.readAsDataURL(input.files[0]);
}

function analyze() {
  var uploadFiles = el("file-input").files;
  if (uploadFiles.length !== 1) alert("Please select a file to analyze!");

  el("analyze-button").innerHTML = "Analyzing...";
  var xhr = new XMLHttpRequest();
  var loc = window.location;
  xhr.open("POST", `${loc.protocol}//${loc.hostname}:${loc.port}/analyze`,
    true);
  xhr.onerror = function() {
    alert(xhr.responseText);
  };
  xhr.onload = function(e) {
    if (this.readyState === 4) {
      var response = JSON.parse(e.target.responseText);
      el("result-label").innerHTML = `Result = ${response["result"]}`;
    }
    el("analyze-button").innerHTML = "Analyze";
  };

  var fileData = new FormData();
  fileData.append("file", uploadFiles[0]);
  xhr.send(fileData);
}

I think I need to adjust how fileData is being made? Or what do I need to adjust from here? Thanks :slight_smile:

Edit: I changed fileData to accept a CSS,

fileData = new CommaSeparatedStrings()

but I’m unsure where to go from here.

Edit x2: Got it working! For anyone wanting to read csv documents to do whatever (my long-term goal was to read a csv of customer data for a tabular model) you need to do the fileData declaration, and in the analyze function (or prepData if you want) do the following:

data = await request.form()
content = await (data['file'].read())
s = str(content, 'utf-8')
data = StringIO(s)
content = pd.read_csv(data)

Hope this can help others :slight_smile:

2 Likes

Thank You @mrfabulous1


i am unable to deploy my app.it is saying gunicorn command not found.i tried keeping gunicorn in requirements.txt after that also its popping up the same error

Hi harshasatyavardhan
Have you tried adding

RUN pip install gunicorn

After the requirements line in the file called “Dockerfile” located in the repository.

Cheers mrfabulous1 :smiley::smiley:

Worked well thanks

Hi Zachery I have also looked and the classes list and it is definitely not a requirement for the app to work.
It is my understanding that it is there for the following reasons.

  1. To enable class names to be used in any app you develop more easily.
  2. As a reference to make it easier to remember what classes were used in your app when you look back at the software in a years time.

If it were not there you would have to extract them from the .pkl file.

Cheers mrfabulous1 :smiley::smiley:

1 Like

Thanks mrfabulous! Yeah I realized I think it’s being used for the website (I saw it referenced in the javascript I believe). For anyone interested, at my campus I gave that talk on deployment and went over a few different models. Here’s the notebook: (The front end is awful, I am not a front-end dev so just focus on how the back-end is operating)
notebook

1 Like

Hi Zachery thanks for sharing your notebook!

mrfabulous1 :smiley::smiley:

No problem! Do note it’s a general guide on how to structure the inference and data collection. Don’t run the notebook :slight_smile: (I’ve just gotten addicted to writing notes this way)

It does work, but depending on the plan you select it can take a REALLY long time to process a large image due to the low ram (1GB) and number cpus (1) of the lowest plans.

If you want more speed I’d look at increasing the ram and cpu of the instance, or hosting on a service which provides a gpu