Create GUI #70

Prakhar314 · 2020-10-14T06:15:55Z

Frame the website using HTML and Flask
Connect python modules. Finish basic functionality.
Work on styling.

ritwik12 · 2020-10-14T19:23:37Z

@Prakhar314 Looks good, Please also add how to use the Web app. Better add a section in Readme about telling the working of this web app so others can contribute to this web app also. Feel free to add credits for the web app in the readme to yourself.

ritwik12 · 2020-10-14T19:24:20Z

@Prakhar314 Being Dynamic webpage, will it be possible to host it somewhere? I think gitpages only supports static pages for now.

ritwik12 · 2020-10-14T19:25:40Z

@Prakhar314 Added WIP in title for now, please remove that once you are done and let me know so that I can review and merge this.

Prakhar314 · 2020-10-19T06:36:38Z

Being Dynamic webpage, will it be possible to host it somewhere? I think gitpages only supports static pages for now.

Heroku could be used I think.

Prakhar314 · 2020-10-19T06:37:27Z

Added WIP in title for now, please remove that once you are done and let me know so that I can review and merge this.

I think I'm done, please review.

ritwik12 · 2020-10-19T17:37:50Z

@Prakhar314 Thanks, let me Review.
Any idea about using Heroku?

ritwik12 · 2020-10-19T19:47:20Z

app/templates/about.html

+	// //get contributors
+	// request = new XMLHttpRequest();
+	// request.open('GET', 'https://api.github.com/repos/ritwik12/Celestial-bodies-detection/contributors');
+	// request.send();
+	// request.onload = async function () {
+	// 	var data = JSON.parse(this.response);
+	// 	console.log(data);
+	// 	var ih = "";
+	// 	// var num=0;
+	// 	data.forEach(element => {
+	// 		if (!element.login.includes("bot")) {
+	// 			// num++;
+	// 			ih = ih.concat("<a href=\"", element.html_url, "\" target=\"_blank\">", element.login, "</a>");
+	// 		}
+	// 	});
+	// 	document.getElementById('num_contributors').innerHTML = "Contributors";
+	// 	document.getElementById('contributors').innerHTML = ih;
+	// }


@Prakhar314 I think we can remove this.

ritwik12 · 2020-10-19T19:50:53Z

app/templates/about.html

+<script>
+	// send request for project description
+	console.log("yp");
+	var request = new XMLHttpRequest();
+	request.open('GET', 'https://api.github.com/repos/ritwik12/Celestial-bodies-detection');
+	request.send();
+	// set description
+	request.onload = async function () {
+		var data = JSON.parse(this.response);
+		console.log(data.description);
+		document.getElementById('aboutProject').innerHTML = data.description;
+	}


@Prakhar314 I see you are currently fetching the Description of repo. This is good but very limited. We can add more details about the project and some cool images to give more info and look better. What do you say?

I guess we can. What do you want to be shown?
I was showing the list of contributors, but commented it out for now (the above review).

@Prakhar314 We can show contributors as well, but we should show something about the project in detail. You can use anything from Readme.md or summarise based on the understanding. Basically it should give an idea to the people coming to the website about the Project and what it does.

ritwik12 · 2020-10-19T19:55:45Z

app/templates/index.html

+          <div class="my-image-form">
+            {{form.image_file}}
+            <div class="custom-file" id="custom-file-upload">
+              <div id="file-label" for="customFile" onclick="open_browser();" class="custom-button text-center">Choose


@Prakhar314 I think instead of Choose file we can change this to Choose Celestial Image to be more cool.

Any other suggestions?

ritwik12 · 2020-10-19T19:57:03Z

app/templates/index.html

+        </div>
+        <div class="my-image-form col-12 d-flex justify-content-center">
+          <div class="my-image-form">
+            <button type="submit" onclick="upload_image();" class="custom-button">Upload</button>


@Prakhar314 So, this upload button is not actually uploading the image but actually works as a SUBMIT or ENTER button for an uploaded image or entered URL. How about changing it to something like Classify or any other suggestions for the word?

ritwik12 · 2020-10-19T19:59:17Z

app/views.py

+from app import app
+from flask import render_template, request, redirect, jsonify, make_response, url_for
+from werkzeug.utils import secure_filename
+from base64 import b64encode
+import os
+import tensorflow as tf
+from hub.examples.image_retraining.label_image import get_labels, wiki
+from hub.examples.image_retraining.reverse_image_search import reverseImageSearch
+from flask_wtf import FlaskForm
+from flask_wtf.file import FileField, FileAllowed, FileStorage
+from wtforms import StringField, validators
+
+from PIL import Image
+import requests
+from io import BytesIO


@Prakhar314 For a better habit always try to follow the PEP8 standards. Most of the projects are strictly restricted to PEP8. For more info: https://www.python.org/dev/peps/pep-0008/#imports

ritwik12 · 2020-10-19T20:00:40Z

app/views.py

+    image_url = StringField(
+        "image_url",
+        validators=[validators.Optional(), validators.URL()],
+        render_kw={"placeholder": "Enter a URL"},


@Prakhar314 Fine with Enter a URL too, but any other suggestions to make it more cool?

ritwik12 · 2020-10-19T20:08:22Z

@Prakhar314 Appreciate your hard work here, Amazing contribution.

ritwik12 · 2020-10-19T20:09:05Z

@Prakhar314 I can see that you have not made any changes to a lot of files but still they are showing in the Diff for your PR. Can you please fix that?

ritwik12 · 2020-10-19T20:11:48Z

@Prakhar314 You have done an amazing job here putting up the GUI and I think with the GUI a more people will be able to use and contribute to the project.

I am really interested in hosting the Web App too. Will you be able to work on that too?

Prakhar314 · 2020-10-21T03:39:05Z

@Prakhar314 I can see that you have not made any changes to a lot of files but still they are showing in the Diff for your PR. Can you please fix that?

I can't figure out how to do that. Do you know how to?
All I could find was how to hide them temporarily(link) during review.

ritwik12 · 2020-10-21T12:25:40Z

@Prakhar314 so when you are doing git add in your git repository. Make sure you only add the files you have worked upon and not do git add .. After that you can commit normally and it will show like usual. for now I think you have directly committed to the Master branch and have not created a new branch.

Whenever you are working on something which is not a small contribution then always create a new branch and push changes to that only. This helps in cases like these to revert things and fix them.

For now if you want, you will have to store your changes to some other places, then hard reset your master branch which will make it back to head of the upstream. Then make the changes and pushing them.

Be aware that when you reset the master it will not have any diff which eventually will close this PR 😅. so for now I think you can go like this only. There are no issues.

ritwik12 · 2020-10-21T12:27:09Z

I think https://cloudfour.com/thinks/quick-tip-how-to-hide-whitespace-changes-in-git-diffs/ is for the reviewer only while reviewing to hide those. You can also hide it but for your VIEW only not for others. And Hiding it does not make it get away from there. They are there.

ritwik12 · 2020-10-21T12:28:09Z

@Prakhar314 Please check the reviews and let me know if you have any doubt. Hope you are not in a hurry, if you have worked hard I want it to be perfect at last.

ritwik12 · 2020-10-27T19:54:35Z

@Prakhar314 Any updates here?

Prakhar314 · 2020-11-01T14:37:25Z

I rebased and force pushed to remove whitespace changes. I also changed some of the button names as asked.
I won't be getting time to update this for a while.
I'll notify when I make changes.

ritwik12 · 2020-11-01T18:59:49Z

@Prakhar314 Ohk sure, Thanks :)

ritwik12 · 2020-12-15T19:34:45Z

@Prakhar314 Did you got time to update? Let's just add screenshots to Readme and Merge this one.

ritwik12 · 2021-05-22T21:24:00Z

@Prakhar314 Reminder!!

ritwik12 · 2021-07-02T21:41:02Z

@Prakhar314 Final nudge, Lets just resolve conflicts to this PR and merge it. we can work on improvements later.

ritwik12 · 2021-07-02T22:59:57Z

@Prakhar314 Merged this, thanks!!

ritwik12 assigned Prakhar314 Oct 14, 2020

ritwik12 changed the title ~~Create GUI~~ [WIP] Create GUI Oct 14, 2020

Prakhar314 force-pushed the master branch 3 times, most recently from 62d224a to e197e2e Compare October 19, 2020 06:35

Prakhar314 changed the title ~~[WIP] Create GUI~~ Create GUI Oct 19, 2020

ritwik12 reviewed Oct 19, 2020

View reviewed changes

ritwik12 added the question Further information is requested label Oct 19, 2020

Create GUI

6dc0014

Prakhar314 force-pushed the master branch from e197e2e to 6dc0014 Compare October 21, 2020 14:13

ritwik12 changed the title ~~Create GUI~~ [WIP] Create GUI Nov 2, 2020

ritwik12 added enhancement New feature or request and removed question Further information is requested labels Nov 2, 2020

Merge branch 'master' into master

8e5a880

ritwik12 merged commit af33be0 into ritwik12:master Jul 2, 2021

ritwik12 mentioned this pull request Jul 3, 2021

Create GUI #5

Closed

ritwik12 changed the title ~~[WIP] Create GUI~~ Create GUI Jul 3, 2021

ritwik12 mentioned this pull request Jul 3, 2021

Improve GUI (WebApp) #79

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create GUI #70

Create GUI #70

Prakhar314 commented Oct 14, 2020 •

edited

ritwik12 commented Oct 14, 2020

ritwik12 commented Oct 14, 2020

ritwik12 commented Oct 14, 2020

Prakhar314 commented Oct 19, 2020

Prakhar314 commented Oct 19, 2020

ritwik12 commented Oct 19, 2020

ritwik12 Oct 19, 2020

ritwik12 Oct 19, 2020

Prakhar314 Oct 21, 2020

ritwik12 Oct 21, 2020 •

edited

ritwik12 Oct 19, 2020

ritwik12 Oct 19, 2020

ritwik12 Oct 19, 2020

ritwik12 Oct 19, 2020

ritwik12 Oct 19, 2020

ritwik12 commented Oct 19, 2020

ritwik12 commented Oct 19, 2020

ritwik12 commented Oct 19, 2020

Prakhar314 commented Oct 21, 2020 •

edited

ritwik12 commented Oct 21, 2020

ritwik12 commented Oct 21, 2020

ritwik12 commented Oct 21, 2020

ritwik12 commented Oct 27, 2020

Prakhar314 commented Nov 1, 2020

ritwik12 commented Nov 1, 2020

ritwik12 commented Dec 15, 2020

ritwik12 commented May 22, 2021

ritwik12 commented Jul 2, 2021

ritwik12 commented Jul 2, 2021

Create GUI #70

Create GUI #70

Conversation

Prakhar314 commented Oct 14, 2020 • edited

ritwik12 commented Oct 14, 2020

ritwik12 commented Oct 14, 2020

ritwik12 commented Oct 14, 2020

Prakhar314 commented Oct 19, 2020

Prakhar314 commented Oct 19, 2020

ritwik12 commented Oct 19, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ritwik12 Oct 21, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ritwik12 commented Oct 19, 2020

ritwik12 commented Oct 19, 2020

ritwik12 commented Oct 19, 2020

Prakhar314 commented Oct 21, 2020 • edited

ritwik12 commented Oct 21, 2020

ritwik12 commented Oct 21, 2020

ritwik12 commented Oct 21, 2020

ritwik12 commented Oct 27, 2020

Prakhar314 commented Nov 1, 2020

ritwik12 commented Nov 1, 2020

ritwik12 commented Dec 15, 2020

ritwik12 commented May 22, 2021

ritwik12 commented Jul 2, 2021

ritwik12 commented Jul 2, 2021

Prakhar314 commented Oct 14, 2020 •

edited

ritwik12 Oct 21, 2020 •

edited

Prakhar314 commented Oct 21, 2020 •

edited