cmudig / eyeintoai-code Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://dig.cmu.edu/eyeintoai/
Home Page: https://dig.cmu.edu/eyeintoai/
Maybe this isn't an issue... but could lead to cheating if people want more time? We can investigate timestamps later and see if this is happening.
If the answer is too long, the answer modal overflows. (ex. train, turtle)
explain_round: { // log when users click the ‘Start game’ button
this.categorySelect = ;
this.imgSelect = ;
pointsEarned
[explanations_chosen: //array of 4 explanations
featureID
timeStamp
featureImportanceScore // how valuable AI thinks this is
]
}
Capture guesses, per release of feature, with time data. Will have two guess rounds with 4 releases to capture what users guess, when they guess it, and if the guess was successful (they guess tiger and original image was tiger).
guess_round1: //(some list of guesses that player enters)
{
featuresChosenByExplainer[1,2,3,4]
pointsEarned:
[release1:
[Guess1: their guess, guessHit, timeOfAction]
[Guess2: their guess, guessHit, timeOfAction]
...
release2:
[
]
}
Players start to recognize potential images after they’ve played more than once, is there a way we might mitigate this?
round 0: choose images for hinting round
round 1: guesser
round 2: hinter
round 3: guesser
Give point if guess matches attribute.
E.g. For guessing correct images they might get 10 points but for each attribute guessed they get 1 point.
Firebase image naming 9.png vs 9.8ee98734.png
Info Needed to Track: introduce log-in for tracking the same user data from multiple games
Text description to explain research
'How to Play' and 'Sign-in to Play' with Google.
Contact us on the footer in case users wish to reach out with comments/questions.
See img / text for mock-up here:
https://www.figma.com/file/QStQm0hS9lAziBcFRMPDe6EI/IML?node-id=511%3A921
Pops up a modal that has an overview of game steps. (modal with info)
Wording is edited / photos are updated.
As a modal, it's easy for first-time users to learn how to play and second-time visitors to skip instructions if desired. Allows the info to be shown without navigating the user to another screen.
mock-up here: https://www.figma.com/file/QStQm0hS9lAziBcFRMPDe6EI/IML?node-id=511%3A921
Embedding google forms survey onto final page of game itself
Each player guess is tracked but is there a way to track name of animal/object (that the features correspond to) and record this as part of logs.
This is to check if player text guesses match what the original image is and still record what image was when player fails to get correct.
It is currently unclear for data analysis.
Images / Text don’t resize when adjusting browser incrementally (e.g. 100% zoom shows images going off page and at 25% zoom text not longer contained in boxes
Currently, I created two answer sets for each category. These answers are used when there's a hint. But because there're only two sets, sometimes it doesn't make sense. For example, if a hint is "it's an object," an automated player might say "strawberry" as an answer.
Not urgent, just better for improving UX.
Position of log-in from upper right to next to 'How To'
How might we highlight the point system in instructions for players? How might this tie to points and competition in future versions?
X vs 'close' - simple fix, just adding here as reminder
Couldn't update the viz since we need to save the file according to the coordination number.
Currently is 0 all the time in logging (not being stored?)
TypeError: undefined is not an object (evaluating 'this.state.players[i].img')
generateProfiles
src/guessai/profile.js:121
118 |
121 |
| ^ 122 | {this.state.players[i].img}
123 |
124 | {this.state.players[i].name}
View compiled
render
src/guessai/profile.js:136
133 | return (
134 |
135 |
136 |
| ^ 137 | {this.generateProfiles()}
138 |
139 |
View compiled
▶ 14 stack frames were collapsed.
./src/index.js
src/index.js:7
4 | import App from './App';
5 | import * as serviceWorker from './serviceWorker';
6 |
7 | ReactDOM.render(, document.getElementById('root'));
8 |
9 | // If you want your app to work offline and load faster, you can change
10 | // unregister() to register() below. Note this comes with some pitfalls.
View compiled
webpack_require
/app/webpack/bootstrap:781
778 | };
779 |
780 | // Execute the module function
781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 782 |
783 | // Flag the module as loaded
784 | module.l = true;
View compiled
fn
/app/webpack/bootstrap:149
146 | );
147 | hotCurrentParents = [];
148 | }
149 | return webpack_require(request);
| ^ 150 | };
151 | var ObjectFactory = function ObjectFactory(name) {
152 | return {
View compiled
(anonymous function)
http://ai-gwap.appspot.com/static/js/main.chunk.js:12389:37
webpack_require
/app/webpack/bootstrap:781
778 | };
779 |
780 | // Execute the module function
781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
| ^ 782 |
783 | // Flag the module as loaded
784 | module.l = true;
View compiled
checkDeferredModules
/app/webpack/bootstrap:45
42 | }
43 | if(fulfilled) {
44 | deferredModules.splice(i--, 1);
45 | result = webpack_require(webpack_require.s = deferredModule[0]);
| ^ 46 | }
47 | }
48 | return result;
View compiled
webpackJsonpCallback
/app/webpack/bootstrap:32
29 | deferredModules.push.apply(deferredModules, executeModules || []);
30 |
31 | // run deferred modules when all chunks ready
32 | return checkDeferredModules();
| ^ 33 | };
34 | function checkDeferredModules() {
35 | var result;
View compiled
global code
http://ai-gwap.appspot.com/static/js/main.chunk.js:1:61
AI selected feature visualizations that are shown to player guessing → are these random or somehow ordered?
When users watch the other players guess it can be confusing as the screen is labeled
"Guess the original image" -> this can be changed to "Others guess the original image."
Would also add a statement for clarity "This is your image...sit back and relax."
#3 in https://www.figma.com/file/QStQm0hS9lAziBcFRMPDe6EI/IML?node-id=511%3A921
Build a button to allow users who are guessing to go to the next hint (allows users to be in control of decreasing the time between hint rounds).
For original images, create numeric scores for representations (good, neutral, bad) (1, 0 , -1) and associate within DB.
This will be the featureImportanceScore when logging data.
Currently, the system saves all the vizs to Firebase after the rounds. If the player leaves before finishing the game, it won't save the data. Needs to be fixed.
Show all players parrot to guess.
Replace Random Button with Parrot and have show images and corresponding visualizations for parrot consistently.
Info Needed to Track: Associate tags with images that are 'attributes'.
Check user guesses against tags associated with original image
Add in demographic questions and refine questions
when guess through final hint and get correct following should log
More time in guess - increasing timer (10 - 20 seconds )
Currently, the answer set selected by the player is saved when the player select feature vizs. Since we randomized the turns, if an automated player is a non-guesser on the first round, the system doesn't update the answer set when the player gets the turn. Which means, it repeats the same answer set as the previous round. An update is required.
Related to another issue, when player is guessing "Guess the original image" is fine and near the enter button can add text for clarity "It's time to guess... go, go , go! " which can emphasize to users it's their turn.
#4 here https://www.figma.com/file/QStQm0hS9lAziBcFRMPDe6EI/IML?node-id=511%3A921
Guessers + Explainers get the same # of points
After each reveal give # of points:
1 explaination - 25
2 explaination - 20
3 explaination - 15
4 explaination -10
hint - 5
Include tag in DB for name of original images (e.g. tiger, strawberry)
This might be already done but should verify to make sure have this info for logging
this.imgSelect = ;
Players might choose animal as the category to kick off the game but this is the area where they choose / describe an image. But when they get images to guess from other 'players' these are not limited to only animals (get mix of objects + animals and players didn’t realize that).
Tracking user id and general info
gameInstanceObject {
this.playerId =
this.playerEmail =
this.startTime =
this.versionNum =
this.totalPoints // updated after all 3 rounds
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.