Move device type detection to client side

We don't need the server to tell us our user agent--we can get it
ourselves through navigator.userAgent and parse it on the frontend.

I've replaced device-detector-js with Bowser because device-detector-js
is really slow, freezing for up to 500ms to parse a single user agent.
This commit is contained in:
valadaptive 2023-12-14 18:37:17 -05:00
parent 8cfc8ebe66
commit 66953ceba3
5 changed files with 25 additions and 48 deletions

9
package-lock.json generated
View File

@ -20,7 +20,6 @@
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"csrf-csrf": "^2.2.3",
"device-detector-js": "^3.0.3",
"express": "^4.18.2",
"form-data": "^4.0.0",
"google-translate-api-browser": "^3.0.1",
@ -1777,14 +1776,6 @@
"node": ">=8"
}
},
"node_modules/device-detector-js": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/device-detector-js/-/device-detector-js-3.0.3.tgz",
"integrity": "sha512-jM89LJAvP6uOd84at8OlD9dWP8KeYCCHUde0RT0HQo/stdoRH4b54Xl/fntx2nEXCmqiFhmo+/cJetS2VGUHPw==",
"engines": {
"node": ">= 8.11.4"
}
},
"node_modules/digest-fetch": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/digest-fetch/-/digest-fetch-1.3.0.tgz",

View File

@ -10,7 +10,6 @@
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"csrf-csrf": "^2.2.3",
"device-detector-js": "^3.0.3",
"express": "^4.18.2",
"form-data": "^4.0.0",
"google-translate-api-browser": "^3.0.1",

14
public/lib/bowser.min.js vendored Normal file

File diff suppressed because one or more lines are too long

View File

@ -36,6 +36,7 @@ import { chat_completion_sources, oai_settings } from './openai.js';
import { getTokenCount } from './tokenizers.js';
import { textgen_types, textgenerationwebui_settings as textgen_settings } from './textgen-settings.js';
import Bowser from '../lib/bowser.min.js';
var RPanelPin = document.getElementById('rm_button_panel_pin');
var LPanelPin = document.getElementById('lm_button_panel_pin');
@ -98,43 +99,22 @@ export function humanizeGenTime(total_gen_time) {
return time_spent;
}
let parsedUA = null;
try {
parsedUA = Bowser.parse(navigator.userAgent);
} catch {
// In case the user agent is an empty string or Bowser can't parse it for some other reason
}
/**
* Checks if the device is a mobile device.
* @returns {boolean} - True if the device is a mobile device, false otherwise.
*/
export function isMobile() {
const mobileTypes = ['smartphone', 'tablet', 'phablet', 'feature phone', 'portable media player'];
const deviceInfo = getDeviceInfo();
const mobileTypes = ['mobile', 'tablet'];
return mobileTypes.includes(deviceInfo?.device?.type);
}
/**
* Loads device info from the server. Caches the result in sessionStorage.
* @returns {object} - The device info object.
*/
function getDeviceInfo() {
let deviceInfo = null;
if (sessionStorage.getItem('deviceInfo')) {
deviceInfo = JSON.parse(sessionStorage.getItem('deviceInfo'));
} else {
$.ajax({
url: '/deviceinfo',
dataType: 'json',
async: false,
cache: true,
success: function (result) {
sessionStorage.setItem('deviceInfo', JSON.stringify(result));
deviceInfo = result;
},
error: function () {
console.log('Couldn\'t load device info. Defaulting to desktop');
deviceInfo = { device: { type: 'desktop' } };
},
});
}
return deviceInfo;
return mobileTypes.includes(parsedUA?.platform?.type);
}
function shouldSendOnEnter() {

View File

@ -27,7 +27,6 @@ const responseTime = require('response-time');
// net related library imports
const net = require('net');
const dns = require('dns');
const DeviceDetector = require('device-detector-js');
const fetch = require('node-fetch').default;
const ipaddr = require('ipaddr.js');
const ipMatching = require('ip-matching');
@ -293,12 +292,6 @@ app.use(multer({ dest: UPLOADS_PATH, limits: { fieldSize: 10 * 1024 * 1024 } }).
app.get('/', function (request, response) {
response.sendFile(process.cwd() + '/public/index.html');
});
app.get('/deviceinfo', function (request, response) {
const userAgent = request.header('user-agent');
const deviceDetector = new DeviceDetector();
const deviceInfo = deviceDetector.parse(userAgent || '');
return response.send(deviceInfo);
});
app.get('/version', async function (_, response) {
const data = await getVersion();
response.send(data);