loke/userflow-predictor
1
0
Fork 0
Code Issues Pull requests 12 Projects Releases Packages Wiki Activity Actions

Feat: bot

Browse source
This commit is contained in:
Lorenzo Iovino 2019-04-26 19:20:40 +02:00
parent b3e47f098f
commit 1c8645039e
24 changed files with 1474 additions and 376 deletions
Download patch file Download diff file Expand all files Collapse all files

32
DataGatherer/src/data/Data.ts
View file

@ -1,32 +0,0 @@
export class Data {
private name: string;
private data: any;
private timestamp: number;
private size: {
width: number;
height: number;
};
constructor(name: string, data: any, size: any, timestamp?: number) {
this.name = name;
this.data = data;
this.timestamp = timestamp ? timestamp : Date.now();
this.size = size;
}
public getName() {
return this.name;
}
public getData() {
return this.data;
}
public getTimestamp() {
return this.timestamp;
}
public getSize() {
return this.size;
}
}

4
DataGatherer/src/gatherer/Gatherer.ts
View file

@ -9,7 +9,7 @@ export class Gatherer {
}
public start() {
for(const source of this.sources){
for (const source of this.sources) {
source.startCollect();
}
}
@ -21,4 +21,4 @@ export class Gatherer {
}
return allData;
}
}
}

30
DataGatherer/src/index.html
View file

@ -2,7 +2,7 @@
<head>
<script src="../dist/bundle.js"></script>
<script>
const interval = setInterval(() => {
/* const interval = setInterval(() => {
let i = 1;
for( i = 1; i <= 13; i++){
const el = document.getElementById(i.toString());
@ -12,23 +12,23 @@
el.style.left = Math.floor(Math.random() * 1000) + 10 + 'px';
}
clearInterval(interval);
}, 200);
}, 200);*/
</script>
</head>
<body>
<button>ciao</button>
<div id="1" style="width: 50px; height: 70px; background-color:red; position: absolute"></div>
<div id="2" style="width: 30px; height: 30px; background-color:blue; position: absolute"></div>
<div id="3" style="width: 40px; height: 20px; background-color:pink; position: absolute"></div>
<div id="4" style="width: 30px; height: 30px; background-color:black; position: absolute"></div>
<div id="5" style="width: 30px; height: 30px; background-color:cyan; position: absolute"></div>
<div id="6" style="width: 30px; height: 30px; background-color:yellow; position: absolute"></div>
<div id="7" style="width: 30px; height: 30px; background-color:limegreen; position: absolute"></div>
<div id="8" style="width: 30px; height: 30px; background-color:darkmagenta; position: absolute"></div>
<div id="9" style="width: 30px; height: 30px; background-color:darkslategray; position: absolute"></div>
<div id="10" style="width: 30px; height: 30px; background-color:fuchsia; position: absolute"></div>
<div id="11" style="width: 30px; height: 30px; background-color:purple; position: absolute"></div>
<div id="12" style="width: 30px; height: 30px; background-color:sienna; position: absolute"></div>
<div id="13" style="width: 30px; height: 30px; background-color:darkturquoise; position: absolute"></div>
<div id="1" style="width: 50px; height: 70px; background-color:red; position: absolute; top: 20px; left: 100px;"></div>
<div id="2" style="width: 30px; height: 500px; background-color:blue; position: absolute; top: 465px; left: 33px;"></div>
<div id="3" style="width: 40px; height: 20px; background-color:pink; position: absolute; top: 765px; left: 46px;"></div>
<div id="4" style="width: 90px; height: 220px; background-color:black; position: absolute; top: 233px; left: 35px;"></div>
<div id="5" style="width: 30px; height: 30px; background-color:cyan; position: absolute; top: 40px; left: 234px;"></div>
<div id="6" style="width: 30px; height: 300px; background-color:yellow; position: absolute; top: 66px; left: 5px;"></div>
<div id="7" style="width: 120px; height: 20px; background-color:limegreen; position: absolute; top: 123px; left: 45px;"></div>
<div id="8" style="width: 30px; height: 10px; background-color:darkmagenta; position: absolute; top: 362px; left: 456px;"></div>
<div id="9" style="width: 220px; height: 30px; background-color:darkslategray; position: absolute; top: 43px; left: 222px;"></div>
<div id="10" style="width: 300px; height: 30px; background-color:fuchsia; position: absolute; top: 201px; left: 100px;"></div>
<div id="11" style="width: 230px; height: 120px; background-color:purple; position: absolute; top: 201px; left: 344px;"></div>
<div id="12" style="width: 80px; height: 230px; background-color:sienna; position: absolute; top: 324px; left: 23px;"></div>
<div id="13" style="width: 30px; height: 100px; background-color:darkturquoise; position: absolute; top: 130px; left: 320px;"></div>
</body>
</html>

40
DataGatherer/src/main.ts
View file

@ -5,20 +5,30 @@ import { Keyboard } from "./source/keyboard/Keyboard";
import { Screen } from "./source/screen/Screen";
function main() {
const gatherer: Gatherer = new Gatherer([
const humanGatherer: Gatherer = new Gatherer([
new Screen('screen'),
new Keyboard('keyboard', ['keydown']),
new Mouse('mouse', ['click', 'mousemove'])
]);
gatherer.start();
//startPrediction(gatherer);
startGathering(gatherer);
// startGathering([humanGatherer, botGatherer]);
startGathering([humanGatherer])
}
function getFlowName() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get('flowName');
}
function getAgentName() {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get('agentName');
}
function startPrediction(gatherer: Gatherer) {
const sender: Sender = new Sender(() => gatherer.getData(), 'localhost:4000/predict', 10000);
const sender: Sender = new Sender(() => gatherer.getData(), 'localhost:4000/predict',10000);
sender.start('http')
.subscribe(
val => {
@ -28,14 +38,18 @@ function startPrediction(gatherer: Gatherer) {
}
function startGathering(gatherer: Gatherer) {
const sender: Sender = new Sender(() => gatherer.getData(), 'localhost:4100/', 3000);
sender.start('ws')
.subscribe(
val => {
console.log(val);
}
);
function startGathering(gatherers: Array<Gatherer>) {
for(const gatherer of gatherers ) {
gatherer.start();
const sender: Sender = new Sender(() => gatherer.getData(), 'localhost:4100/' + '?agentName='+getAgentName()+'&flowName='+getFlowName(), 1000);
sender.start('ws')
.subscribe(
val => {
console.log(val);
}
);
}
}
main();

3
DataGatherer/src/sender/Sender.ts
View file

@ -1,7 +1,7 @@
import { interval, Observable, of } from 'rxjs';
import { filter, flatMap, delay } from 'rxjs/operators';
import { Rxios } from 'rxios';
import {Data} from "../data/Data";
import {Data} from "../shared/Data";
export class Sender {
private url: string;
@ -36,7 +36,6 @@ export class Sender {
this.wsConnect.send(JSON.stringify(data));
return new Observable((observer) => {
this.wsConnect.onmessage = (msg) => {
console.log(msg);
observer.next(msg);
};
});

17
DataGatherer/src/shared/Data.ts Normal file
View file

@ -0,0 +1,17 @@
export class Data {
public name: string;
public data: any;
public timestamp: number;
public size: {
width: number;
height: number;
};
constructor(name: string, data: any, size: any, timestamp?: number) {
this.name = name;
this.data = data;
this.timestamp = timestamp ? timestamp : Date.now();
this.size = size;
}
}

2
DataGatherer/src/source/Source.ts
View file

@ -1,4 +1,4 @@
import { Data } from "./../data/Data";
import { Data } from "../shared/Data";
export class Source {
private name: string;

132
DataGatherer/src/source/mouse/Mouse.ts
View file

@ -1,5 +1,5 @@
import { Source } from '../Source';
import {Data} from "../../data/Data";
import {Data} from "../../shared/Data";
export class Mouse extends Source {
@ -8,11 +8,139 @@ export class Mouse extends Source {
}
startCollect() {
this.collectHumanDatas();
}
collectHumanDatas() {
for(const event of this.events){
document.addEventListener(event, (e: MouseEvent) => {
this.data.push(new Data(event, {x: e.x, y: e.y}, {width: window.innerWidth, height: window.innerHeight}));
this.data.push(
new Data(
event,
{
x: e.x,
y: e.y,
target: {
id: e.target['id'],
innerText: e.target['innerText'],
style: {
backgroundColor: e.target['style'].backgroundColor
},
rect: e.target['getBoundingClientRect']()
}
}, {
width: window.innerWidth,
height: window.innerHeight
}
)
);
});
}
}
/*collectBotDatas(flow: Array<MouseEventFlow>) {
function getIntersectedElement(position: {x: number, y: number}) {
//for()
}
function computeMovement(startingPoint: {x: number, y: number}, targetId: string): Promise<Array<Data>> {
return new Promise( (resolve, reject) => {
let movements = [];
const target = document.getElementById(targetId);
const targetCenterCoords = {x: target.getBoundingClientRect().left + target.getBoundingClientRect().width / 2, y: target.getBoundingClientRect().top + target.getBoundingClientRect().height / 2};
const distance_x = Math.abs(startingPoint.x - targetCenterCoords.x);
const distance_y = Math.abs(startingPoint.y - targetCenterCoords.y);
const distance = Math.sqrt(Math.pow(distance_x, 2) + Math.pow(distance_y, 2));
const movementTime = Math.random() * 5000 + 1000;
if(distance) {
const trance = Math.floor(distance / 20);
const step_x = distance_x / trance;
const step_y = distance_y / trance;
let i = 1;
const interval = setInterval(() => {
movements.push(new Data(
'mousemove',
{
x: startingPoint.x > targetCenterCoords.x ? startingPoint.x - step_x * i : startingPoint.x + step_x * i ,
y: startingPoint.y > targetCenterCoords.y ? startingPoint.y - step_y * i : startingPoint.y + step_y * i ,
target: {
id: '',
innerText: '',
style: {},
rect: {}
}
}, {
width: window.innerWidth,
height: window.innerHeight
})
);
i++;
if(i > trance) {
console.log(target);
clearInterval(interval);
resolve(movements);
}
}, movementTime / trance);
} else {
movements = [];
resolve(movements);
}
})
}
function computeInit(): Data {
return new Data(
'mousemove',
{
x: Math.floor(Math.random() * window.innerWidth) + 1,
y: Math.floor(Math.random() * window.innerHeight) + 1,
target: {
id: '',
innerText: '',
style: {},
rect: {}
}
}, {
width: window.innerWidth,
height: window.innerHeight
}
);
}
let i = 0;
let evt = flow[i];
const interval = setInterval( () => {
evt = flow[i];
if(evt.type === 'init') {
this.data.push(computeInit());
i++;
}
if(evt.type === 'mousemove') {
computeMovement({x: this.data[this.data.length-1].data.x, y: this.data[this.data.length-1].data.y}, evt.target)
.then(
movements => {
console.log(movements);
this.data.push(...movements);
i++;
}
);
}
if(evt.type === 'click') {
i++;
}
if(i === flow.length) {
clearInterval(interval);
}
}, 20);
}*/
}

6
DataGatherer/src/source/screen/Screen.ts
View file

@ -1,6 +1,6 @@
import { Source } from '../Source';
import Html2CanvasStatic from "html2canvas";
import {Data} from "../../data/Data";
import {Data} from "../../shared/Data";
export class Screen extends Source {
@ -9,7 +9,7 @@ export class Screen extends Source {
}
public startCollect() {
const interval = setInterval(() => {
/* const interval = setInterval(() => {
if (document.body) {
Html2CanvasStatic(document.body, {logging: false})
.then((canvas) => {
@ -17,6 +17,6 @@ export class Screen extends Source {
this.data.push(new Data('screen', imgData, {width: window.innerWidth, height: window.innerHeight}))
});
}
}, 5000);
}, 500);*/
}
}