Skip to content

Commit

Permalink
Add ai-model component for text to 3D model generation
Browse files Browse the repository at this point in the history
  • Loading branch information
dmarcos committed Mar 21, 2024
1 parent bb1e7a4 commit 47e658b
Show file tree
Hide file tree
Showing 9 changed files with 101 additions and 3 deletions.
7 changes: 7 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,13 @@
"ecmaVersion": 8
}
},
{
/* This module uses ES8 async / await due to WebXR Anchor Module integration */
"files": ["./src/components/ai-model.js"],
"parserOptions": {
"ecmaVersion": 8
}
},
{
/* This module uses ES6 for…of loops, and so is parsed as ES6 to avoid errors. */
"files": ["./src/components/hand-tracking-controls.js"],
Expand Down
20 changes: 20 additions & 0 deletions examples/showcase/ai-model/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AI Model • A-Frame</title>
<meta name="description" content="Anchor (Mixed Reality) • A-Frame">
<script src="../../../dist/aframe-master.js"></script>
<script src="../../js/info-message.js"></script>
</head>
<body>
<a-scene
info-message="htmlSrc: #messageText">
<a-assets>
<a-asset-item id="messageText" src="message.html"></a-asset-item>
</a-assets>
<a-entity ai-model></a-entity>
</a-scene>
</body>
</html>

3 changes: 3 additions & 0 deletions examples/showcase/ai-model/message.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<p>
This demo illustrates how to integrate text to 3D in A-Frame</a>
</p>
6 changes: 4 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"buffer": "^6.0.3",
"debug": "ngokevin/debug#noTimestamp",
"deep-assign": "^2.0.0",
"@gradio/client": "0.14.0",
"load-bmfont": "^1.2.3",
"super-animejs": "^3.1.0",
"super-three": "0.162.0",
Expand Down Expand Up @@ -73,6 +74,7 @@
"karma-webpack": "^5.0.0",
"markserv": "github:sukima/markserv#feature/fix-broken-websoketio-link",
"mocha": "^10.0.0",
"node-polyfill-webpack-plugin": "^3.0.0",
"replace-in-file": "^2.5.3",
"shelljs": "^0.7.7",
"shx": "^0.2.2",
Expand Down Expand Up @@ -115,7 +117,7 @@
"webxr"
],
"engines": {
"node": ">= 4.6.0",
"npm": ">= 2.15.9"
"node": ">= 21.7.1",
"npm": ">= 10.5.0"
}
}
35 changes: 35 additions & 0 deletions src/components/ai-model.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
var registerComponent = require('../core/component').registerComponent;
var GRADIOCLIENT = require('../lib/gradio');

/**
* AI model loader.
*/
module.exports.Component = registerComponent('ai-model', {
schema: {
prompt: {type: 'string', default: 'robot'},
api: {type: 'string', oneOf: ['perflow']},
key: {type: 'string', default: ''}
},

init: function () {
this.generateAndRender(this.data.prompt);
},

update: function () {

},

generateAndRender: async function generateAndRender (prompt) {
var modelEl = document.createElement('a-entity');
modelEl.setAttribute('position', '0 1.6 -2');
modelEl.setAttribute('rotation', '0 180 0');
var app = await GRADIOCLIENT('hansyan/perflow-triposr', {});
var result = await app.predict(
'/render',
(await app.predict('/generate', [prompt, '0'])).data
);
console.log('Model URL: ' + result.data[0].url);
modelEl.setAttribute('obj-model', {obj: result.data[0].url});
this.el.sceneEl.appendChild(modelEl);
}
});
1 change: 1 addition & 0 deletions src/components/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
require('./ai-model');
require('./animation');
require('./anchored');
require('./camera');
Expand Down
3 changes: 3 additions & 0 deletions src/lib/gradio.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
var GRADIOCLIENT = require('./gradio.module.js').default;

module.exports = GRADIOCLIENT;
5 changes: 5 additions & 0 deletions src/lib/gradio.module.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import { client } from '@gradio/client';

var GRADIOCLIENT = client;

export default GRADIOCLIENT;
24 changes: 23 additions & 1 deletion webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
var path = require('path');
var webpack = require('webpack');
var NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

module.exports = {
entry: './src/index.js',
Expand Down Expand Up @@ -29,11 +30,32 @@ module.exports = {
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
}),
new webpack.NormalModuleReplacementPlugin(/node:/, (resource) => {
resource.request = resource.request.replace(/^node:/, '');
}),
new NodePolyfillPlugin()
],
resolve: {
alias: {
three: 'super-three'
},
fallback: {
// fixes proxy-agent dependencies
crypto: false,
net: false,
dns: false,
tls: false,
assert: false,
http: false,
https: false,
// fixes next-i18next dependencies
path: false,
fs: false,
// fixes mapbox dependencies
events: false,
// fixes sentry dependencies
process: false
}
},
module: {
Expand Down

0 comments on commit 47e658b

Please sign in to comment.