mistal and graphhopper example, local via ngrok

mistral-and-graphhopper
Fabien Benetou 7 months ago
parent 8d0f5e2756
commit 388f71f0fe
  1. 78
      index.html
  2. 39
      jxr.js

@ -29,7 +29,7 @@
<!-- still experimenting, see webdav.html -->
<script src='dependencies/webdav.js'></script>
<script src='jxr.js'></script>
<script src='jxr.js?#123'></script>
<!-- replacing with local copies as CDNs are like unpkg tend to be slow
<script type="module" src="https://unpkg.com/immers-client/dist/destination.bundle.js"></script>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
@ -108,9 +108,22 @@
<a-entity hide-on-enter-ar="" id="environment" class="hidableenvironment" ></a-entity>
<a-entity hide-on-enter-ar="" id="environmentsky" class="hidableenvironment" ></a-entity>
<a-troika-text anchor=left target value="instructions : \n--right pinch to move\n--left pinch to execute" position="0 0.65 -0.2" scale="0.1 0.1 0.1"></a-troika-text>
<!--
<a-troika-text anchor=left target id="startdraw2d" annotation="content:dessiner en 2D"
value="jxr startDraw2D()" position="0 1.45 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target id="startdraw2d" annotation="content:dessiner en 2D;back:aide a venir;"
value="jxr startDraw2D()" position="0 1.45 -1" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target id="mvxo" annotation="content:pengouin pas sud;back:aide a venir;"
value='jxr qs #penguin ga position .x--' position="0 1.45 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target id="mvz" annotation="content:pengouin pas est;back:aide a venir;"
value='jxr qs #penguin ga position .z++' position="0 1.35 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target id="mvzo" annotation="content:pengouin pas ouest;back:aide a venir;"
value='jxr qs #penguin ga position .z--' position="0 1.25 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target id="mvx" annotation="content:pengouin pas nord;back:aide a venir;"
value='jxr qs #penguin ga position .x++' position="0 1.15 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target id="displaypred" value="jxr displayPred()" position="0 1.40 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target id="locationreload" value="jxr location.reload()" position="0 1.20 -0.1" scale="0.1 0.1 0.1"></a-troika-text>
@ -118,28 +131,69 @@
<a-troika-text anchor=left target value="jxr tiltUpId('codeditor')" position=" -0.3 1.65 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr tiltDownId('codeditor')" position=" -0.3 1.60 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushLeftClass('reader')" position=" -0.3 1.55 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushRightClass('reader')" position=" -0.3 1.50 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushUpClass('reader')" position=" -0.3 1.45 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushDownClass('reader')" position=" -0.3 1.40 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushBackClass('reader')" position=" -0.3 1.35 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushFrontClass('reader')" position=" -0.3 1.30 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
-->
<script>
function mistrallocal(prompt){
//fetch('http://192.168.0.129:8080/completion', {
// failed on Quest, needs https, could try through ngrok
fetch('https://0670-2a02-1811-1c74-7f00-5649-1451-ab01-7f3d.ngrok-free.app/completion' , {
//fetch('http://localhost:8080/completion', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
'prompt': prompt,
'n_predict': 128
})
}).then( res => res.json() ).then( res => {
setFeedbackHUD(res.content)
let el = addNewNote(res.content)
el.setAttribute('annotation', prompt)
})
}
function getDirections(){
fetch('https://5ae9-83-217-141-167.ngrok-free.app/route?point=50.837974%2C4.379907&point=50.839004%2C4.358106&profile=car').then(r=>r.json()).then(r=>{
let inst = r.paths[0]?.instructions.map(i=>i.text.split(' - ')[0]).reverse();
let si = setInterval( _ => {
let i = inst.pop();
if (i) { console.log(i); setFeedbackHUD(i) } else { clearInterval(si) }
}, 3000 )
})
}
</script>
<a-troika-text anchor=left target value="jxr getDirections()" position=" 0.3 1.55 0" rotation="0 -45 0" scale="0.1 0.1 0.1"></a-troika-text>
<!--
<a-troika-text anchor=left target value="jxr mistrallocal('tell the short story of a penguin friend with a fish')" position=" 0.3 1.55 0" rotation="0 -45 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushLeftClass('maptile')" position=" -0.3 1.55 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushRightClass('maptile')" position=" -0.3 1.50 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushUpClass('maptile')" position=" -0.3 1.45 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushDownClass('maptile')" position=" -0.3 1.40 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushBackClass('maptile')" position=" -0.3 1.35 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
<a-troika-text anchor=left target value="jxr pushFrontClass('maptile')" position=" -0.3 1.30 0" rotation="0 90 0" scale="0.1 0.1 0.1"></a-troika-text>
-->
<!-- somehow disable hand interaction despite, according to the documentation, it should rely on world position
<a-text target value="jxr qs #rig sa position 0 0 10" position="0 1.55 .5" rotation="0 180 0" scale="0.1 0.1 0.1"></a-text>
-->
<a-console position="0 2 -0.8" rotation="-5 0 0" font-size="34" height=1 skip-intro=true></a-console>
<a-console position="-1 1.2 -0.8" rotation="-5 80 0" font-size="34" height=.1 skip-intro=true></a-console>
<a-troika-text value="Biggu's Gate" outline-width="5%" font="../content/ChakraPetch-Regular.ttf" position="0 2 -0.5"
rotation="25 0 0" troika-text="outlineWidth: 0.01; strokeColor: #ffffff" material="flatShading: true; blending: additive; emissive: #00f"></a-troika-text>
<a-gltf-model hide-on-enter-ar="" src="../content/winterset/Mountains.glb" position="0 0 0" rotation="0 0 0" scale="10 10 10" class="clonableasset"></a-gltf-model>
-->
<a-entity id="tablescaled" scale=".1 .1 .1" position="0 0.8 -.3">
<a-gltf-model src="../content/winterset/Crystal.glb" position="-1 0 -1" rotation="0 0 0" scale=".1 .1 .1" class="clonableasset"></a-gltf-model>
<a-gltf-model id="fish" src="../content/winterset/Fish.glb" position="2 0 -2" rotation="0 0 0" scale=".01 .01 .01" class="clonableasset"></a-gltf-model>
<a-gltf-model id="penguin" src="../content/winterset/Penguin.glb" position="0 0 -1" rotation="0 0 0" scale=".1 .1 .1" class="clonableasset"></a-gltf-model>
</a-entity>
<!--
<a-gltf-model src="../content/winterset/Pinetree.glb" position="0 3 -10" rotation="0 0 0" scale="5 5 5" class="clonableasset"></a-gltf-model>
-->
<a-plane hide-on-enter-ar="" scale="50 50 50" rotation="-90 0 0" color="lightblue"></a-plane>
</a-scene>

@ -1334,6 +1334,9 @@ function parseJXR( code ){
newcode = newcode.replace(/ sa ([^\s]+) (.*)/,`.setAttribute('$1','$2')`)
// problematic for position as they include spaces
newcode = newcode.replace(/ ga ([^\s]+)/,`.getAttribute('$1')`)
// also problematic to compount but can work e.g interpretJXR('jxr qs #penguin ga position .x++')
newcode = newcode.replace(/obsv ([^\s]+)/ ,`newNoteFromObservableCell('$1')`)
// TODO
@ -3422,18 +3425,24 @@ function thumbToIndexAngle(){
AFRAME.registerComponent('annotation', {
// consider also multiple annotation but being mindful that it might clutter significantly
schema: {
content : {type: 'string'}
content : {type: 'string', default:''},
back : {type: 'string', default:''}
},
init: function () {
addAnnotation(this.el, this.data.content)
let back = addAnnotation(this.el, this.data.back)
back.setAttribute('position', '0 0 -.2')
back.setAttribute('rotation', '180 0 0')
back.setAttribute('material', 'side:front')
back.classList.add( 'back' )
},
update: function () {
this.el.querySelector('.annotation').setAttribute('value', this.data.content )
this.el.querySelector('.annotation').setAttribute('value', this.data.content )
// assuming single annotation
},
remove: function () {
this.el.querySelector('.annotation').removeFromParent()
//Array.from( this.el.querySelectorAll('.annotation') ).map( a => a.removeFromParent() )
Array.from( this.el.querySelectorAll('.annotation') ).map( a => a.removeFromParent() )
}
})
@ -3441,6 +3450,7 @@ function addAnnotation(el, content){
// could also appear only when in close proximity or while pinching
let annotation = document.createElement( 'a-troika-text' )
annotation.classList.add( 'annotation' )
annotation.classList.add( 'content' )
annotation.setAttribute('value', content)
annotation.setAttribute('position', '0 .1 -.1')
annotation.setAttribute('rotation', '-90 0 0')
@ -3448,7 +3458,7 @@ function addAnnotation(el, content){
annotation.setAttribute("outline-width", "5%" )
annotation.setAttribute("outline-color", "black" )
el.appendChild(annotation)
return el
return annotation
}
// used for testing, now that jxr.js is outside of index.html, could consider putting this back in index.html instead to keep behavior one would expect from a library
@ -3464,7 +3474,6 @@ consider also
see https://git.benetou.fr/utopiah/text-code-xr-engine/issues/52 for more shorthands
*/
const movePenguin = "jxr qs #penguin sa position 1 0 -2"
const rotatePenguin = "jxr qs #penguin sa rotation 0 -20 0"
@ -3494,25 +3503,29 @@ see https://git.benetou.fr/utopiah/text-code-xr-engine/issues/52 for more shorth
el.setAttribute('scale', '.1 .1 .1')
AFRAME.scenes[0].appendChild(el)
*/
let h = [
[1,1,1,1,1,1,1,1,1,1],
[1,0,0,0,1,0,0,0,0,1],
[1,0,0,0,0,1,0,0,0,1],
[1,0,0,0,1,0,0,0,0,1],
[1,0,0,0,0,1,0,0,0,1],
[1,0,0,0,1,0,0,0,0,1],
[1,0,0,0,0,1,0,0,0,1],
[1,0,0,0,1,0,0,0,0,1],
[1,0,0,0,1,0,0,3,0,1],
[1,0,0,0,0,1,0,0,0,1],
[1,0,2,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,0,0,0,0,0,0,1],
[1,0,0,2,0,1,0,0,0,1],
[1,1,1,1,1,1,1,1,1,1],
]
for (let z=0;z<10;z++)
for (let x=0;x<10;x++){
el = document.createElement("a-entity")
el.setAttribute('position', (x-5) + ' 0 ' + (z-5) )
el.classList.add( 'maptile' )
el.setAttribute('geometry', "primitive: cylinder; segmentsRadial: 8; segmentsHeight: 1; radius: 0.5; height: "+(h[x][z]+.1)+";" )
el.setAttribute('material', 'color', 'lightblue')
AFRAME.scenes[0].appendChild(el)
//AFRAME.scenes[0].appendChild(el)
document.getElementById('tablescaled').appendChild(el)
}
// consider instanciateFromPrimitive() also in order to clone a set of blocks

Loading…
Cancel
Save