aimacode / aima-javascript Goto Github PK

Javascript visualization of algorithms from Russell And Norvig's "Artificial Intelligence - A Modern Approach"

Home Page: http://aimacode.github.io/aima-javascript/

License: MIT License

JavaScript 80.23% HTML 18.55% CSS 1.22%

aima-javascript's Introduction

aima-javascript

Visualization of concepts from Russell And Norvig's "Artificial Intelligence — A Modern Approach", and Javascript code for algorithms. Unlike aima-python, aima-java, and other sibling projects, this project is primarily about the visualizations and secondarily about the code.

Some Javascript visualizations that I admire, and would like to see similar kinds of things here:

aima-javascript's People

Contributors

Stargazers

Watchers

Forkers

shubhamgoswami prabod ghost---shadow sabyasachi-g cuongcua90 kepta girib smsubham rajul anhtuan98 fhernandez173 kaiesh migsalazar kiarie utkarshshukla7 phunghx aidarbek laurit17 boykadan jc-johnson cliffordowino surender7790 zhaiduo xdwsl tanduong nervgh sffej jason790 marrary2 hungnguyengoc suissa melatonin355 asutosh7hota thennavanr rishav159 cs-master knut0815 jwarni lfthwjx vamshi9 kkalou kartik2112 todd-placher yanxg merovingienne fredyfx manda7rsnt preethi26 aakashchan nikolayog meghanagupta gaurav1911 akhil09 nayangupta824 mmoda81 zyrx chihsienyen ricardoamaro jkgold suribes joseph-zhong olesiakissa bhavya9107 payaskrishna tenorbert lnming ifarhankhan redblobgames barathwaja albertbuchard fideledegni rs19hack peoplemakeculture hectorpyco istanbulboy mwblee usman2x sergiocollado raksonibs asutosh989 wuzhida kavap phpmind jmmastey xiaoyuliiiii chasandrapuspita xuanchenghuang rakshith98 fei090620 isiuiki godlotns akkimah solversa newbazz gurpreet3131 letslego niksj bumzack phzpan im-gozmit

aima-javascript's Issues

Ch 4 - Improve hill climbing diagram

From @Rishav159:

Small visualizations to demonstrate ridges, plateaus, local maxima and explain how that causes problems. The Hill Climbing Search diagram does that to some extent but that’s not its primary objective.

Demonstrate variations of hill climbing search like stochastic hill climbing, first-choice hill climbing, random-restart hill climbing etc.

3-Solving-Problems-By-Searching

Let's discuss the visualizations for chapter 3 here.

Ch 2 - Performance measures

TODO: dirty/clean should be controlled automatically, reproducible using seeded RNG, and then display a line chart with the performance measure.

We can add the following feature by creating 2 types of agents:
1.) agent that moves continuously but takes up more time to clean
2.) agent that stops after regular intervals but takes less time to clean

We can either use a 1x2 floor or 2x2 floor to make the problem more complex.
Things to be decided before implementing:-
1.)Points awarded for each successful clean
2.)Points deducted for each extra moment
3.)Points deducted on the basis for the time the floor is dirty (a negative factor to agent 2)

The performance will be shown as a line chart of scores v/s time where scores measure the performance of the agent.
To make it more interactive and intuitive, the feature of setting the stop-interval and the cleaning-interval
to show various performances.
@redblobgames Would it be useful to implement it?
Would like to work on it: Yes.

19-Knowledge-In-Learning

Discussion of visualization for chapter 19. Candidates for visualization:

problems
concepts
solutions (algorithms)

Ch1- Introduction

I would like to work on Ch 1- Introduction also.
@redblobgames is it okay if I complete this first and then continue working with ch-22?

Ch 6 - Redesign arc consistency diagram

The current diagram is an animation but it doesn't explain how the algorithm works or what the main concepts are. How does it compare to node consistency or path consistency?

4-Beyond-Classical-Search

Let's discuss visualizations and code for chapter 4 here. What are the main ideas from the chapter that could be turned into interactive/animated visualizations?

What about chapters without any pseudocode?

Not all chapters have pseudocode, but I think we should keep the directory for completeness sake. However the question remains, what are we going to put in the html page in directories for those chapters?

Maybe a brief explanation or a few paragraphs on the topic would be nice.

gh-pages

I'm new to gh-pages, so I don't understand how it woeks.

Does it have to be re-generated every time there is a change to master branch?
How do I see the resulting pages?

6-Constraint Satisfaction Problems

We can discuss the development in chapter 6 here.

5-Adversarial-Search

Let's discuss what concepts are presented in this chapter, and what visualizations can show the concepts, problems, and algorithms.

About using the projects feature in Github

I just noticed a Projects tab in Github. (Sorry, I didnt notice it before) I played around with it and it is kind of interesting. I think we should give it a try for the sake of experimentation. Perhaps we might end up liking it.

What do you all think?

Requiring external module babel-register takes a long time

I am new to gulp, whenever I run gulp SOME_TASK it says "require external module babel-register". This takes a solid 20 seconds or so. The actual task takes milliseconds to complete.

What is happening here? How do I fix it? What is this babel-register?

I tried npm install babel-register and also tried installing npm3. It did not fix the problem.

I followed this youtube tutorial series, this guys does the same thing a bit differently than what we are doing. The task completes in microseconds.

18-Learning-From-Examples

Let's discuss visualizations and code for chapter 18 here. What are the main ideas from the chapter that could be turned into interactive/animated visualizations?

javascript repo

I myself started a repo few days ago for javascript implementations of the book. if it is up to standard i would like to contribute that to this repo

https://github.com/prabod/aima-Javascript

Ch 4 - Improve Simulated Annealing diagram

@Rishav159 writes:

Simulated Annealing is a hard concept to explain in just a single diagram. We realized this while working on it. There are several parameters that determine a good simulated annealing and it might require something more than just a "Hill representation of state space diagram". I am out of ideas on this one for now. You are welcomed to come up with new ways to demonstrate this algorithm :)

Proposing a new IRC Channel to discuss ideas and guide new comers

With the GSOC approaching, more and more participants will need guidance. I feel there should be an IRC channel for this purpose. We can discuss new ideas and get to know each other in such a platform.
What do you guys say ?

How to Contribute or Developer Documentation?

Hey, is there a document which I can refer to get started with this?
I would like to contribute to this project. If there is no such document, I could start with creating that doc itself.

Ch 3 - Show why Depth-Limited and Iterative-Deepening search is useful

The book says we would use depth-limited or iterative-deepening search when the tree is large (maybe infinite), and breadth first search would use too much memory. It might be useful to make that comparison in these two diagrams by showing how much memory is used by breadth first search vs depth limited search.

HTML5 canvas visualization and formation of gh-pages

Printing output on the console is fine but for better understanding, I think it is a good idea visualize each and every problem using interactive HTML5 canvas.

The code will be embedded alongside the output in the HTML page. Then we can create a gh-pages branch so that github can do the work of hosting the pages by itself.

We should use two.js to make the visualizations.

https://jonobr1.github.io/two.js/

two.js is a very popular javascript graphics library. It is used a lot in chrome experiments. It supports WebGL which we might need if we make a any visualizations with large number of sprites.

https://www.chromeexperiments.com/

Starting point for GSoC 2017

Hello.
AIMA is one of the participating organisations for GSoC 2017, and some of the project proposals involve working on visualisations for aima-javascript (http://aima.cs.berkeley.edu/gsoc-ideas.html). Since I've followed this textbook for one of my university courses, I'd like to work on the javascript side of the code base.

I tried following the thread on Issue #27 , but I'm new to this group and am not sure what would be an appropriate place to get started for a few initial pull requests/commits.

Though I do not have a lot of experience with javascript visualisations, I can pick it up quite quickly and contribute a substantial amount in the next week or so. Moreover, I would love to contribute working code examples as well. Could anyone help me with a place to get started?

Ch 3 - Show concepts for A* search

The current diagram shows the mechanics of A* search (g value, h value, f value, etc.) but not some of the concepts in the book:

Admissible/consistent heuristic. Is it useful to show an inadmissible heuristic so that we would see a non-shortest path computed? I don't know.
Choice of heuristics. The book mentions absolute and relative error of the heuristic. The smaller the error, the better the time complexity of A*. This could be a diagram that offers the choice of several heuristics, and displays how much of the graph is searched for each choice.
Contours. When the heuristic is admissible, the f values never decrease, and this creates contours in the graph. The current graph makes it hard to see those contours makes it hard to see but a denser graph could be used to make the contours visible. For example in a 1000-node graph, you could color the nodes with f values between 50 and 60, another color between 60 and 70, another color between 70 and 80, etc. Or maybe lines between those nodes would look better.

These might each be a separate diagram.

unfinished git merge logs in code

Currently the package.json file is having

unfinished merge diffs
linking to a personal repository
an author

Ch 22 - language classification demo misbehaves when pressing Enter

In the language classification demo, type some text and press Enter instead of clicking the button. The page erases the text and reloads instead of running the classification. I believe this is because the html specifies a <form> and form submission goes back to the server by default. Either make form submission trigger the classification, or take out the <form>.

Deciding on a standard front-end framework to build animations

I think we should decide on a standard front end framework for the purpose of creating animations.
I don't have a lot of experience in this field and thus want suggestions regarding this. I have tried two.js in the Breadth First Search visualizations in Chapter 3.
Thanks in advance.

15-Probabilistic-Reasoning-Over-Time

Let's discuss visualizations and code for chapter 15 here. What are the main ideas from the chapter that could be turned into interactive/animated visualizations?

Ch 4 - Redesign Online DFS Agent diagram

The existing diagram is an implementation of the algorithm but we want diagrams that show the concepts and how the algorithm works. For example, the diagram should show untried and unbacktracked from the algorithm.

Ch 3 - Animate the queue operations

From @Rishav159:

For the bfs, dfs and ucs diagrams, there is a section in the right that shows a queue which contains the frontier nodes. As the algorithm progresses, the nodes in these queues are added and removed. Currently, the queue simply updates instantly. It would be nice to have animations allowing the user to see that some new nodes are added or if a node is removed

The drop-downs in the navigation bar does not work on the landing page

The navigation bar enables users to navigate through the website quickly. Apart from a few typos in the links of the tabs, the dropdown menu does not seem to work in the landing section. Can anyone point out the reason ?

21-Reinforcement-Learning

Visualizations and code for chapter 21

Ch 4 - Add local beam search diagram

We don't know whether local beam search makes for an interesting diagram but if someone has ideas, let's try them

Ch 6 - Add backtracking heuristics

From @Rishav159:

Backtracking Search diagram currently works without any heuristics. It would be nice to have additional diagrams demonstrating the working of the heuristics that usually accompany the backtracking search algorithm.

Top navigation bar is broken

All links in the (top) navigation bar links to http://aimacode.github.io/x-ChapterName it should be http://aimacode.github.io/aima-javascript/x-ChapterName. This includes the home button.

Ch 3 - Add hover effect to connect left and right side of diagrams

From @Rishav159:

In the node expansion diagram, a zoom effect is used when hovered over a node that can be clicked. It serves 2 purposes: It tells the reader if a node is clickable and also it highlights the same node in the section on the right. A similar kind of effect will be useful in the bfs, dfs and ucs diagrams. The user should match the position of a node in the queue by hovering over the node in the graph itself.

It would be nice if hovering on either side of the diagram showed the connection to the other half.

2-Intelligent-Agents

Chapter 2 already has a visualization of an algorithm; what are the concepts that we can visualize? My first thoughts:

Table driven agent: show a table of the percepts and the resulting action. Given the state of the world, show which table entries would be activated.
Rule driven agent: show a sequence of rules and the resulting action. Given the state of the world, show which rules would be activated. Follow the action from the first matching rule.
Model driven agent: show the internal model of the world also. I'm not sure if there's something meaningful with the vacuum cleaner agent though.

I don't know if these visualizations will be useful or interesting but I would like to try them and see.

22-Natural Language Processing

I would like to work on Ch - Natural Language Processing.
Should we talk on what and how to implement in this section?

Greedy best first search

greedy best first search search has been mentioned in the book but not implemented. I would like to implement it. Shall I proceed ?

Ch 22 - larger training set for text classification demo

The current training set for the language classification demo is small. This is good for load time but not as good for classification.

If we increase the training set we'll make the page load slower.

Is it possible to train offline and then load the training results in the web page, or will that be just as big as the training data itself?

Ch 4 - Redesign genetic algorithm diagram

There is a diagram but it's only an implementation of genetic algorithms and not an explanation of them. We want diagrams that explain the concepts (crossover points, mutation, asexual vs sexual reproduction), and how the algorithms work.

We should use code mirror.

Using Code mirror readers would be able to modify the javascript on the fly while reading. The changes would be reflected back in the visualization. Something like IPython Notebook.

What do you guys think?

Repository Structure

I propose the following structure for this repo:
It must be divided into 2 directories:
1. CommonJS
2. AMD

The former would contain modules following CJS pattern (server-side JS Code, i.e., Node.js) and the latter, AMD (client-side JS Code).

for example: if A Star Search Code needs argmax () functionality from utils.js, the CJS version of search.js (the file which contains the A-Star Search Code) would use the statement:

require ("./utils.js");

and the CJS utils.js must contain the following line of code:

function argmax (...) {...}
exports.argmax = argmax;

This keeps the repo neatly divided and, I believe, will eliminate confusion. However, it might lead to 2 copies of the same code being kept.
For example: The argmax () function implementation remains the same, regardless of the modular pattern. However, since the method of importing the module is different for the 2 directories, we may have to maintain 2 separate copies of this function - 1 inside CJS folder and 1 inside AMD folder.

I could be wrong, I'm still learning. So I'd be happy if more people contribute on deciding the Directory Structure, I believe it is crucial in order to make it easier for the user.

Also for Visualization, I believe D3 provides an excellent set of tools.